• 목차

10.1 프로젝트 준비하기

10.1.1 프로젝트 생성 및 필요한 라이브러리 설치

• 프로젝트 설치

<aside> 🔥 $ yarn create react-app todo-app

</aside>

• 필요한 라이브러리 설치

<aside> 🔥 $ yarn add node-sass classnames react-icons

</aside>

10.1.2 Prettier 설정

• .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

10.1.3 index.css 수정

• 기존 내용은 삭제하고 body의 background를 회색으로 변경

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

10.1.4 App 컴포넌트 초기화

• 기존 내용 삭제

import React from 'react';
import './App.css';

function App() {
  return <div>Todo App 만들기</div>;
}

export default App;

10.2 UI 구성하기

• 만들 컴포넌트
  1. TodoTemplete: 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여 줍니다 children으로 내부 JSX를 props로 받아와서 렌딩해 줍니다
  2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다.
  3. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아와서 상태에 따라 다른 스타일의 UI를 보여줍니다.
  4. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러개의 TodoListItem 컴포넌트로 변환하여 보여 줍니다.
• 위 컴포넌트들은 src 디렉터리에 components라는 디렉터리를 생성하여 그 안에 저장합니다
  • 기능이나 구조상 필요하기 때문이 아니라 관습임

10.2.1 TodoTemplate 만들기