CRA를 활용해서 프로젝트를 생성하였고 CSS는 Tailwind CSS를 사용했다.
라우팅 방식은 React-Router-Dom을 활용했다.
진행하면서 가장 시간을 들였던 부분은 수정 버튼을 눌렀을 때 버튼이 바뀌고 수정 이후 TodoList의 state를 변경하는 과정이었던 것 같다.
const handleUpdateTodo = async (
id: number,
checked: boolean,
changeTodo: string
) => {
if (!token) return;
const responseTodo = await fetchUpdateToDoApi(
token,
id,
checked,
changeTodo
);
const updateTodoList = todoList.map((todo) => {
if (todo.id === responseTodo.id) {
return {
...todo,
isCompleted: checked,
todo: changeTodo,
};
}
return todo;
});
setTodoList(updateTodoList);
};
수정 input에 todo정보를 입력하고 onClick() 이벤트가 발생하면 먼저 해당 todo의 id, 체크 여부, 바뀐 todo내용을 인자로 전달해 주었다.
전달받은 값들이 들어왔을 때 fetchUpdateToDoApi와 통신을 하게 되는데 이전에 token값이 없는 상태라면 return 한다.
물론 이전에 useEffect()를 통해서 토큰 값이 존재하지 않다면 로그인 페이지로 이동하게 구현해 두었다.
그 후 통신을 마치면 새로운 리스트를 불러오던가 바뀐 정보를 업데이트해주어야 하는데 나는 후자를 택하였다.
기존에 todoList의 Map()를 통해서 id값이 일치하면 스프레드 연산자를 통해서 내용을 풀어놓고 체크 여부와 todo의 바뀐 내용만 변경하고 setTodoList()를 통해서 update 된 todoList로 state를 업데이트해준다.
이번 과제를 하면서 느낀 점은 오랜만에 ToDo List를 구현하다 보니 시간이 꽤 걸린 것 같았다.
하지만 어떤면으로 보면 처음에 비교했을 때보다는 정말 많이 코딩 실력이 는 것 같지만 이제는 취업을 해야 하기 때문에 더 완벽하고 빠르게 구현할 수 있도록 노력해야겠다.
아래는 구현된 todoPage이다.
