프로젝트 준비

1. 콘솔

$ yarn create react-app todo-app
$cd todo-app
$yarn add node-sass@4.14.1 classnames react-icons

• sass를 사용함
• classnames: 조건부 스타일링할 때 필요
• react-icons: 리액트에서 다양한 아이콘 사용 가능한 라이브러리

2. Prettier 설정

• 프로젝트 최상위 디렉터리에 .prettierrc 파일 생성
• 아래 설정 복붙하기

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

3. index.css 수정

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

4. app컴포넌트 초기화

• rsc 사용

import React from 'react';
const App = () => {
  return <div>Todo app 을 만들자 !</div>;
};
export default App;

5. jsconfig.json 파일 만들기

{
  "compilerOptions": { "target": "es6" }
}

UI 구성하기

1. 용도 정리

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

컴포넌트 만들기

-onInsert함수는 컴포넌트의 성능을 아낄 수 있도록 useCallback으로 감쌈(props로 전달할 함수를 만들 때는 늘 useCallback을 사용하기)