👀 진행 상황
1. 중복 component
// App.js
<div className="App">
<h1>MY TO-DO</h1>
<CreateToDo onCreate={onCreate} />
<Working>
<TodoList todoList={data.filter((todo) => !todo.isDone)} onRemove={onRemove} getDone={getDone} />
</Working>
<Done>
<DoneList doneList={data.filter((todo) => todo.isDone)} turnBack={turnBack} />
</Done>
</div>
App의 return문만 가져왔다.
일단 컴포넌트를 정리해보자면
Create, Working(>TodoList>TodoItem), Done(>DoneList>DoneItem)으로
총 7개의 컴포넌트를 만들었다.
하지만 다 만들고 생각해보니 TodoItem과 DoneItem 모두 같은 형태로 이루어져 있고 텍스트만 다를 뿐 기능적으로 하나의 함수만 달리 사용할 뿐 똑같았다.
따라서 두 개의 컴포넌트를 하나로 합쳐야 한다고 생각했다.
2. props drilling
Working(>TodoList>TodoItem), Done(>DoneList>DoneItem)
라는 컴포넌트 구조 상, TodoItem에서 사용해야 할 prop이 있을 경우에 Working부터 대대손손 prop을 전달하면서 props drilling이 생겼다.
// App.js return문 일부
<TodoList todoList={data.filter((todo) => !todo.isDone)} onRemove={onRemove} getDone={getDone} />
이렇게 onRemove, getDone 모두 그 하위 컴포넌트가 사용해야 할 프롭들인데 단순히 전달만 하기 위해 prop을 사용하고 있다!!!!!
이 부분을 해결해야 할 것 같다.
✨ 개선 방향
1. component 줄이고 조건부 렌더링
기능적으로 동일하지만 서로 다른 컴포넌트인 TodoItem과 DoneItem을 하나의 컴포넌트로 합쳐야겠다. 그리고 얘네가 나뉘어지는 기준이 isDone 속성의 true,false 여부이기 때문에 그걸로 조건부 렌더링을 해야겠다.
2. redux로 전역 상태 관리
지금 App에서 useState로 상태 1개 사용, App의 하위 컴포넌트인 Create에서 상태 1개를 사용하고 있는데, 얘네의 데이터를 만지기 위해서 props로 왔다갔다 주고 받고 과정에서 props drilling이 발생하고 가독성도 안 좋았다. 그래서 이 부분은 상태를 중앙 집중으로 관리할 수 있는 redux로 리팩토링 해보려고 한다.
