반성 먼저
문제를 주의깊게 봤어야 했는데 뼈아픈 실수다. 내가 협업을 하거나 다른 사람의 코드를 볼 때 이해를 잘못하고 수정해버릴 수도 있다. 다른 사람 코드를 읽어보는 연습을 해야하나. 코드를 볼 때 보고싶은 부분만 딱딱 확인하고 넘기는 면이 있었던 것 같다. 이건 다음에 조언을 구해봐야겠다.
항해 측에서도 이런 문제풀이를 하면 오답처리를 하거나 따로 알려줬다면 좋았을 것 같다. 내가 문제의 의도대로 풀지 않은 거고 모범답안을 검토하지 않았다면 눈치채지 못했다.
문제
상세 페이지에 진입하였을 때 데이터가 업데이트 되지 않음.
내가 제출한 답안
Detail 컴포넌트는 모든 todos를 불러왔는데 todos는 여러 객체가 담긴 배열로 불러와집니다. 하지만 데이터를 불러올때 todo.id 형식으로 몇번째 객체의 데이터를 불러올지 설정하지 않아서 아무 데이터도 호출하지 못합니다. useParams로 추출한 id값을 todo의 id값들과 비교하여 같은 id의 데이터만 호출하도록 수정하였습니다.
const Detail = () => { const dispatch = useDispatch(); const todo = useSelector((state) => state.todos.todos); const { id } = useParams(); const navigate = useNavigate(); const todoDetail = todo.find((todoDetail) => todoDetail.id === id); console.log(todoDetail); return ( <StContainer> <StDialog> <div> <StDialogHeader> <div>ID :{todoDetail.id}</div> <StButton borderColor="#ddd" onClick={() => { navigate('/'); }} 이전으로 </StButton> </StDialogHeader> <StTitle>{todoDetail.title}</StTitle> <StBody>{todoDetail.body}</StBody> </div> </StDialog> </StContainer> ); };
내가 놓친 문제점
- Detail.jsx에서 useDispatch를 import했는데 왜 import했는지 고려하지 않음
- 리듀서 getTodoByID가 import되어있는데 getTodoByID가 무슨 기능인지 확인도 하지 않았다.(있는 지도 몰랐다 ㅎㅎㅎ)
모범답안
(본인이 이해한 방식으로 기술)
param으로 추출한 id값을 getTodoByID로 보내면 리듀서에서 id와 같은 값을 가진 todos의 객체를 todo에 담아준다.
그렇게 담긴 todo를 불러와야 하는데 useEffect를 사용하여 마운트 단계에서 해당 동작을 실행할 수 있도록 해줘야한다.
const dispatch = useDispatch();
const todo = useSelector((state) => state.todos.todo);
const { id } = useParams();
const navigate = useNavigate();
useEffect(() => {
dispatch(getTodoByID(id));
}, [dispatch, id]);- useEffect를 사용하지 않아도 todo는 불러와지지만 컨트롤 하는거에 의미가 있는걸까
-> 의도하지 않은 동작, 성능 문제, 의존성 관리 등의 이유로 사용한다고 한다. - useEffect의 의존성 배결은 id만 넣어도 동작은 한다.
-> 넣어야하는 이유 (챗GPT의 답변)
id만 의존성 배열에 포함시키면 id값이 변경되었을 때만 getTodoByID 액션을 디스패치하고, todo 상태에 대한 변경을 처리하는 액션은 실행되지 않을 수 있다. 그럼 todo의 상태가 업데이트되지 않아 예상한 대로 작동하지 않을 수 있다. 그래서 dispatch 함수를 의존성 배열에 추가해 todo상태를 업데이트 하는 코드를 추가해야 한다.
