앞으로 만들 컴포넌트를 하나하나 용도별로 소개하겠습니다!

1. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여 줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다.

2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다.

3. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다.

4. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여 보여 줍니다.

이렇게 총 네 개의 컴포넌트를 만듭니다. 이 컴포넌트들은 src 디렉터리에 components라는 디렉터리를 생성하여 그 안에 저장하겠습니다. 컴포넌트 파일을 components 디렉터리에 넣는 이유는 기능이나 구조상 필요하기 때문이 아니라 자주 사용되는 관습이기 때문입니다.

지금 단계에서는 컴포넌트의 기능에 대해 신경 쓰기보다는 모양새를 갖추는 데 집중하겠습니다.