2022-12-15 목요일

산·2022년 12월 15일

TIL 부트캠프 스타르타코딩클럽

Today I Learned

목록 보기

33/114

📅 오늘 한 일

1. 리액트와 리덕스로 투두리스트 만들기

🪲 오늘 해결한 에러

배경

리액트와 리덕스를 사용해서 투두리스트를 만들고 있었다
내가 원했던 건 TodoListSection.jsx(컴포넌트)에서 할 일 완료 버튼을 누르면 해당 할 일이 완료한 할 일이 있는 영역으로 보내주는 동시에 완료 버튼이 취소 버튼으로 바뀌도록 하고 싶었다.
완료 버튼을 누르면 useDispatch로 action을 보내도록 했다.

해결해야 했던 것

어떻게 TodoListSection 안에서 내가 원하는 할 일의 고유ID를 얻어서 payload에 실어줄 수 있을까?

시도한 것

시도 1 : 할 일 고유ID는 Todolist.js(리덕스 모듈)에 있으니까 거기서 가져오면 되겠다.
결과 -> 실패

시도 2 : 돔트리를 이용해서 할 일의 아이디를 가져오자. 현재로서는 UI단에서 고유ID에 접근할 수 없으니까 화면에 ID를 그냥 넣어보자.
결과 -> 성공한 듯했으나 실패

시도2가 성공한 듯 보였던 이유

일단 고유ID를 리듀서 함수에 보내줄 수 있었다.
거기서 ID를 비교하는 방식으로 상태를 완료로 바꿔주는 로직이 있었는데, 액션 객체에 실어보냈던 고유 ID가 object여서 로직에 맞지 않았다. 그리고 고유ID가 object라는 걸 알아내는 데도 시간이 많이 걸렸다. JS 디버깅이 힘들다는 말에 공감을 했다.
온갖 소스 밑에서 console.log 찍어 보면서 찾으려고 했지만 도무지 도무지 알 수가 없었다. 에러 메시지가 뜨지 않으니까 구글링도 좀 어려웠다.

그래서 어떻게 해결했는지

결론 : 같이 공부하는 팀원들에게 어려움을 공유했더니 같은 경험을 한 팀원이 있어서 도움을 받았음. 진짜 문제는 할 일의 고유ID를 얻은 로직 자체에 있었음.

진짜 문제

이게 시도 2 코드였다.

// 할 일 완료 버튼
<button onClick={handleSwitchButtonClick}

// 위 버튼 클릭 시 호출되는 dispatch 함수 
const handleSwitchButtonClick = (event) => {
	const id = event.target.previousSibling
	dispatch({
		type: 'TOGGLE_BTN',
		tododata: {
			id: id,
		},
	});
};

->
결과 : id값이 전달은 되지만 string이 아니라 object였음 다른 방법으로 id를 얻어야 했음

그래서 이렇게 했다.

// 할 일 완료 버튼
<button onClick={handleSwitchButtonClick(item.id)}

// 위 버튼 클릭 시 호출되는 dispatch 함수 
const handleSwitchButtonClick = (id) => {
	dispatch({
		type: 'TOGGLE_BTN',
		tododata: {
			id: id,
		},
	});
};

->
결과 : dispatch 함수에 item.id를 전달했음에도 해결이 안 됐다. 위 코드 자체에 대한 에러는 안 떴는데, 리듀서 함수 쪽에서 id값 undifined 에러메시지가 떴다.

점점 원인은 미궁으로 가는 듯 했으나, 위 에러를 해결해본 팀원이 도움을 줬다.

// 할 일 완료 버튼
<button onClick={()=>handleSwitchButtonClick(item.id)}

// 위 버튼 클릭 시 호출되는 dispatch 함수 
const handleSwitchButtonClick = (id) => {
	dispatch({
		type: 'TOGGLE_BTN',
		tododata: {
			id: id,
		},
	});
};

->
해결!
button onClick={ 뒤에 () => 이것이 없어서였다...