위 프로젝트는 총 네 가지 컴포넌트를 사용하여 구성했습니다. 먼저 전체적인 틀을 잡아 주는 TodoTemplate 컴포넌트입니다. 이 컴포넌트는 현재 화면의 중앙에 있는 사각형 레이아웃의 역할을 하고 있습니다. 그리고 새로운 항목을 추가할 수 있는 TodoInput 컴포넌트입니다. 위 화면에서는 검정색 영역이 바로 TodoInput입니다. 그리고 할 일 항목을 여러 개 보여 주는 TodoList 컴포넌트입니다. 마지막으로 TodoList에서 각 항목을 보여 주기 위해 사용되는 TodoItem 컴포넌트입니다.

컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있습니다.

이 장에서는 먼저 클래스형 컴포넌트에 대해 살펴본 뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다.