반응형

1. 프로젝트 생성 및 라이브러리 설치

  • 프로젝트 생성 : yarn create react-app todo-app
  • 라이브러리 설치 : yarn add node-sass@4.14.1 classnames react-icons

2. Prettier 설정

3. index.css 수정

 

4. UI 구성하기 : 총 4개의 컴포넌트를 만든다

  • TodoTemplate : 화면을 가운데 정렬, 앱 타이틀을 보여준다, children으로 내부 JSX를 props로 받아와 렌더링 해줌
  • TodoInsert :새로운 항목을 입력하고 추가할 수 있는 컴포넌트, state를 통해 인풋의 상태를 관리
  • TodoListItem :각 할 일 항목에 대한 정보를 보여주는 컴포넌트, todo 객체를 props로 받아와 상태에 따라 다른 UI를 보여줌
  • TodoList : todos 배열을 props로 받아 온 후 map을 사용해 여러 개의 TodoListItem 컴포넌트로 변환하여 보여줌

5. TodoTemplate 만들기

 

 

반응형

+ Recent posts