React ToDoList

React 첫 과제로 ToDoList 작성을 하였다.
이미 많은 ToDoList를 작성 했기에 큰 흐름은 잘 알고있기에
이번에 작성하면서 [].reduce로 todo목록과 완료목록을 나눈 방법을 되새기자 한다.

reduce를 사용한 배열 나누기

보통 내가 생각하기로는 todo목록, 완료 목록을 뿌려 주려고 생각할 때 배열state를 2개 생성해서 관리하거나 또는 하나의 state(toDoList)를 생성해서 목록 생성 부분에서 filter와 map으로 2번을 하려고 생각하지만 reduce를 사용하면 filter 부분을 한번으로 줄일 수 있다.

const [toDoList, setToDoList] = useState([]);

const [workingToDoList, doneToDoList] = toDoList.reduce((acc, cus) => {
	acc[!cus.isDone ? 0 : 1].push(cus);
  return acc;
}, [[], []]);

reduce 초기값을 2차원 배열로 선언하고 isDone으로 각 배열에 맞는 index를 넣고 그 배열에 현재의 값을 push하는 방식으로 진행된다.

toDoList state가 갱신될때 마다 toDoList.reduce()가 실행되어 완료 버튼을 클릭 할 때 workingToDolist, donToDoList가 갱신하여 관리가 수월해 진다.

reduce는 쓰면 쓸수록 만능이라는 생각도 들지만 자주 사용하지않아서 그런지 코드 작성시에 바로 아! reduce써야지 라는 생각을 쉽게 하지는 못하는것 같다.
의도적으로 자주 쓰고 다양한 사용방법을 익히면 아주 아주 편리 할 것같다.