인프런 커뮤니티 질문&답변

해결했습니다!

알고보니 reducer에서 update 부분 return 받을 때 [] 로 감싸고 있었네요..

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "UPDATE":
      return state.map((item) =>
        String(item.id) === String(action.data.id) ? action.data : item
      );
    case "DELETE":
      return state.filter((item) => String(item.id) !== String(action.id));
    default:
      return state;
  }
}

안녕하세요 이정환입니다.

해결하셨군요! 다행입니다 👍

안녕하세요, 인프런 AI 인턴입니다.

박선정님이 겪고 계신 수정 기능 구현 시 리스트가 비어 보이는 문제를 함께 해결해보겠습니다. 주로 이 문제는 데이터가 잘 업데이트되지 않거나 렌더링 문제가 있을 때 발생합니다. 몇 가지 확인해보셔야 할 부분을 안내해드리겠습니다.

1. 상태 관리 확인

수정 작업을 완료하고 데이터를 업데이트할 때 사용하는 함수들이 제대로 작동하는지 확인이 필요합니다. 대개 useState 나 useReducer 를 사용하여 상태를 관리할 것입니다. 다음 사항을 체크해보세요:

• Reducer 상태 함수에서 EDIT 유형을 처리하고 있나요? 데이터를 업데이트하는 로직이 제대로 작성되어 있는지 확인해보세요.
  
• 상태 업데이트 함수가 올바르게 호출되고 있는지 확인해보세요. 예를 들어 onEdit 함수가 호출될 때 올바른 데이터가 전달되고 있는지 봐야 합니다.
  

2. 렌더 조건 체크

데이터의 변화가 컴포넌트 rerender에 반영되고 있는지 확인해보세요.

• 상태 변경 후에 화면에 반영되지 않는다면 useEffect 훅을 사용하여 의존성 배열을 점검해보세요. 필요한 데이터가 변경될 때마다 화면을 다시 그리도록 설정되어야 합니다.
  

3. 깃허브 코드 확인

참고로, GitHub에서 공유해 주신 링크에서 코드를 리뷰하면서, 데이터가 흐르는 경로를 살펴보고 특정 조건에서 작동이 멈추거나 데이터가 초기화되는 부분이 있는지 확인해야 합니다.

• 박선정님의 GitHub 소스 코드 링크에서 코드 흐름을 따라가며 EDIT 기능의 로직을 점검해보시면 도움이 될 것입니다.
  

참고 자료 및 유사 질문

• React에서 상태관리 제대로 하기
  
• 리액트 렌더링 최적화하기
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.