일정 관리 애플리케이션 개발 흐름
1. 프로젝트 준비하기
2. UI 구성하기
3. 기능 구현하기

UI 구성하기

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

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