TDD 흐름으로 일정 관리 애플리케이션 만들기

이제 우리는 기본적인 컴포넌트 테스트 방법을 모두 익혔습니다. 지금까지 배운것들을 활용하여 TDD 흐름으로 일정관리 애플리케이션을 위한 컴포넌트들을 만들어보겠습니다. 이 과정에서는 디자인은 최소한으로 하여 프로젝트 개발을 진행하겠습니다.

우선, 만들어야 할 컴포넌트들을 계획해봅시다.

• TodoForm: input과 button 으로 이루어진 form. submit 이벤트가 발생하면 props 로 받아온 onInsert 함수에 현재 인풋 값을 넣어서 호출해주고, 기존 인풋 값을 공백으로 설정합니다.
• TodoItem: todo 객체를 props 로 받아와서 done 값이 true 면 텍스트에 취소선을 그어줍니다. 삭제 버튼을 누르면 해당 항목을 삭제합니다.
• TodoList: todos 배열을 props 로 받아와서 여러개의 TodoItem 컴포넌트를 렌더링합니다.
• TodoApp: 할일 목록 추가, 토글, 삭제 기능을 관리합니다.

위 계획에 맞춰 한번 컴포넌트를 순서대로 하나하나 만들어봅시다!