인프런 커뮤니티 질문&답변
작성한 질문수
todolist에서 useReducer를 사용할때 UPDATE에서 오류가 생깁니다
작성
·
19
0
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)
제목을 구체적으로 작성해 주세요
✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.
⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.
깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요
직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲
답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲
강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요
더 빠른 답변이 가능합니다!
영상과 똑같이 코드를 작성하였을 때,
렌더링 되는 화면이 모두 날아갔습니다. 이때
이렇게 return 을 추가하니 정상작동하게 되었는데 이유가 궁금합니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 고민지님.
작성하신 코드에서 useReducer 의 UPDATE 액션에 대한 처리가 제대로 되지 않아 발생한 문제에 대해 설명드리겠습니다. 질문에 올려주신 두 개의 이미지는 reducer 함수에서 CREATE 와 UPDATE 액션을 다루는 부분을 보여주고 있습니다.
문제의 원인
reducer 함수의 UPDATE 케이스에서, 각각의 item을 업데이트하는 로직이 없거나 잘못된 경우 이슈가 발생할 수 있습니다. 주어진 코드에서 UPDATE 액션은 state.map 을 사용하여 각 item 을 순회하고, item.id 가 action.targetId 와 일치할 때 isDone 속성을 토글(toggling) 하고 있습니다.
기존의 reducer 함수 블록:
case 'UPDATE':
return state.map((item) => {
if (item.id === action.targetId) {
return { ...item, isDone: !item.isDone }; // 기존 구조를 기반으로 새로운 객체를 반환
}
return item; // 바뀌지 않는 항목은 그대로 반환
});
해결된 이유
주어진 코드에서 item 을 업데이트할 때 중요한 점은, 새로운 item 객체를 명시적으로 반환함으로써 React의 상태 관리에서 불변성(immutability)을 유지하는 것입니다. 이렇게 해야 React에서 상태 변경을 감지하고 적절히 리렌더링을 할 수 있습니다.
return 문을 잘못 위치해 두어, 업데이트되지 않는 항목에 대해서도 적절히 반환하지 않았다면 상태가 올바르게 업데이트되지 않아서 리렌더링이 발생하지 않았을 수 있습니다. 수정 후 코드에서 item 모든 조건에 대해 반환하게 됨으로써 상태가 제대로 갱신되어 정상적으로 작동하게 된 것입니다.
관련 내용으로 유사한 문제를 다루고 있는 다른 게시글을 참고하실 수 있습니다:
- useReducer에 대한 상태 업데이트 이슈
이 게시글들은 useReducer 와 상태 불변성에 대해 이해를 높이고, 현재 코드를 개선하는 데 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.