- 며칠 전 이머시브의 마지막 HA를 치르면서 다시 복습했던 React를 까먹기 전에 간단한 Todo List를 만들어 봤다.
- 그동안 배운 부분을 조금씩 사용해서 클라이언트-서버-DB 모두를 사용해 보기로 했다.
- 완료를 하고 Redux까지 공부해서 사용해 보려고 했지만 이것만으로도 주말이 다 지나가 버렸다.
- 항상 코드스테이츠에서 클론을 받아와서 작업을 하다가 처음 시작부터 하려고 하니까 틀을 잡기가 상당히 어려웠다.
Todo List 만들기 Todo List
- React 앱으로 Todo List 설계하기
- React 앱 라우팅을 적용하기
- 서버 API 만들기
- 요청에 따라 데이터베이스 CRUD API 사용
준비
처음 시작이 가장 어려웠었다. 사실 지난주에 전화번호부 만들기를 무작정 시작했다가 이도 저도 못하고 실패를 해서 이번에는 어떻게 구상해야 할지 간단하게라고 구조를 미리 설계해봤다.
컴포넌트
- App : Todo List와 Log Book을 서로 연결해 준다.
- TodoTemplate: App으로 받은 데이터와 핸들러 함수를 전달해 주고 input 등 전반적인 메인 화면을 보여준다.
- TodoItemList: 전달받은 데이터를 map을 이용해서 나누고 TodoItem으로 전달해 준다.
- TodoItem: 받은 데이터를 보여주고 완료 버튼클릭시 해당 항목을 완료 목록으로 이동시킨다.
- LogBook: 완료한 목록들을 표시한다.
어려웠던 점
-
원하는 삭제가 이루어지지 않았다. 완료 클릭시 todo가 사라지지 않거나 다른 todo가 사라진다.
=> 선택한 id값과 DB의 id가 일치하지 않았다. 완료 버튼을 클릭할 때 handleCompleted 함수에 인자로 받는 id값을 일치 시켜 주었다. -
완료한 Todo를 어떻게 선택해서 LogBook까지 이동하게 해야 할지와 그때의 데이터 베이스는 어떻게 처리해 줘야 할지 이 부분에서 상당히 애를 먹었다.
=> 서버 API와 데이터 베이스에서 모델을 추가했다. 완료 버튼 클릭시 서버에 POST 요청을 보내서 새롭게 만든 completed모델에 해당 데이터를 찾고 새롭게 추가를 한다. 그 후에 todo모델에서 해당 데이터를 삭제한다.
=> 이렇게 하면 Todo리스트는 todo모델에서 추가 삭제를 하고, LogBook에서는 completed모델에서 데이터를 받아오면 되기 때문에 App을 통해서 두 컴포넌트의 상태를 연결 할 필요는 없었다.
Todo List 화면.GIF
