웹프런트엔드 프로젝트3 [리액트] - [할 일 관리] 앱 만들기 - 1 기본적인 할 일 관리 앱은 다음과 같은 기능을 포함할 수 있습니다. 1. 할 일 추가2. 할 일 삭제3. 할 일 완료 상태 토글4. 할 일 목록 표시 UI 요소를 컴포넌트 단위로 생각하는 게 중요하다고 생각합니다. 1. 프로젝트 설정먼저 Create React App을 사용하여 새로운 리액트 프로젝트를 생성합니다.npx create-react-app todo_appcd todo-appnpm start 2. 기본 구조 설정프로젝트 폴더 구조는 다음과 같이 구성할 수 있습니다:public/src/ └── components/ ├── TodoItem.js ├── TodoList.js └── TodoForm.js └── App.js └── index.js 3. 컴포넌트.. 2024. 6. 9. 리액트 공부 - 2일차 "useState" useState() useState() 함수는 리액트에서 상태 관리를 위해 사용되는 Hook입니다. 이 함수는 함수형 컴포넌트에서 클래스 컴포넌트의 this.state와 같은 역할을 할 수 있게 해줍니다. useState()를 사용하면 컴포넌트 내부에서 상태값을 가질 수 있으며, 이 상태값을 업데이트할 때컴포넌트가 다시 렌더링 되도록 할 수 있습니다. 사용 방법 useState() 함수는 초기 상태값을 인자로 받고, 상태값과 이 상태를 설정하는 함수를배열로 반환합니다. 구조 분해 할당을 통해 이 배열의 값을 두 개의 변수에 할당할 수 있습니다. import React, { useState } from 'react';function ExComponent() { // useState를 사용하여 count라는.. 2024. 6. 8. 웹 페이지 만들어보기 - 프런트엔드 우선 메인 페이지 작업부터 만들겠습니다. 모바일 버전의 header에는 기본적으로 서비스명이 들어가고, 로그인 전에는 로그인 폼이 들어가며, 로그인 후에는 나의 페이지와 모두의 페이지로 이동하는 링크와 로그인한 사람의 이름 그리고 로그아웃 버튼이 들어갑니다. 헤더를 만들었으므로 이번엔 헤더 아래에 container를 만듭니다. container는 회원가입 폼이 들어가며 jQuery를 이용하여 [가입하기] 버튼을 누르면 회원가입 폼이 표시되도록 설계합니다. 이렇게 코드를 완성하고 나면 다음엔 CSS를 꾸미겠습니다. 2024. 1. 12. 이전 1 다음 반응형
