7. 투두리스트 컴포넌트 준비하기

어떠한 컴포넌트가 필요할까요? 앞으로 우리가 만들 컴포넌트들을 살펴봅시다.

App.js

• 우리가 만들게 될 리액트 프로젝트의 중심
• 다른 컴포넌트들을 렌더링함

components/CreateForm.js

• 투두아이템을 등록하는 컴포넌트

나머지 컴포넌트들은 src/components 경로에 저장합니다. (그냥 컴포넌트끼리 분류하기 위함이며 특별한 이유는 없습니다) 컴포넌트 파일들은 나중에 한꺼번에 만들겠습니다.

components/TodoItem.js

• 각 투두 정보를 보여주는 컴포넌트

체크되면 좌측에 체크가 나타나고 텍스트에 줄이 그어지죠. 그리고 지우기 부분은 마우스가 위에 있을때만 나타납니다.

components/TodoList.js

• 여러개의 TodoItem 컴포넌트를 렌더링합니다.