[TO-DO-App] 투두앱을 만들어보자 by React - 02. 할일 목록 저장

TodoList 컴포넌트 구현 

- 리액트는 컴포넌트를 결합하여 만들어진다. 

 

이 앱의 메인 컴포넌트인 <TodoList> 를 만들어보자 

 

 

코드의 주요 특징은 다음과 같다

- 컴포넌트를 선언하는 export default function 을 통해 선언.

- useState를 통하여 상태를 정의하고 그것을 설정하는 함수인 setTodos를 가지고 있는 map을 선언.

  - todos에 모든 할일 목록을 가지고 있음

  - id는 UUID를 통해서 랜덤화 시키고, 실제 할일은 text라는 prop에 넣는다

  - 활성 상태 여부를 status라는 prop으로 선언. 

- handleAdd라는 함수로 추가하는 로직을 만들고 그 과정에서 useState의 setTodos를 사용 

- AddTodo 라는 컴포넌트를 선언하고 추가 기능을 구현한다. (다음 포스팅)

 

이상으로 리스트를 저장하는 투두앱을 만들어봤다