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

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

보내주신 코드 확인 완료했습니다. 우선 실습에 불편함을 드려 죄송합니다.

문제의 원인은 3주 전에 이루어진 React Router V7 업데이트로 인해 navigate 함수의 동작 방식이 변경되어 발생하는 문제로 확인되었습니다.

기존 React Router V6 버전에서는 navigate 함수가 동기적으로 동작하였기 때문에, 페이지가 이동할 때에 기존 페이지의 리액트 훅이나 이펙트가 동작하지 않았는데요

V7 버전부터는 이제 navigate 함수가 비동기적으로 동작하여, 페이지 이동중에도 기존 페이지의 리액트 훅이나 이펙트 들이 동작한다고 합니다.

따라서 이 문제를 해결하시려면 설치된 React Router의 버전을 V6로 다운그레이드하시는 방법과 V7에 맞도록 코드를 수정하는 방법이 있는데요, 다운그레이드는 무언가 후퇴하는것 같은 느낌이 있으니 이보다는 전진하는 방식으로 코드 수정 방법을 안내드리겠습니다.

방법은 간단합니다 useDiary.js 파일 안에 작성되어 있는 useDiary의 useEffect 함수의 Deps(의존성 배열)을 아래와 같이 변경하시면 됩니다.

  useEffect(() => {
    (...)
  }, [id]); // 변경 사항!!

기존에는 [id, data] 요렇게 설정되어 있던 의존성 배열의 값을 [id]로 변경하시게 되면 이제 data State의 변화로 인해 useDiary 훅이 다시 호출되지 않습니다. 이로인해 페이지에 처음 진입하는 상황에서만 "존재하지 않는 일기입니다" 얼럿이 발생하고 이미 페이지에 진입한 이후 일기가 삭제된 상태에서는 얼럿이 발생하지 않게 됩니다.

안녕하세요 이정환입니다

.소스코드가 답글에 달려있지 않은 것 같은데 확인 부탁드립니다..!

안녕하세요, 인프런 AI 인턴입니다. sw.sub님!

수강생님께서 직면하고 있는 “존재하지 않는 일기입니다.“라는 알림이 삭제 후 나타나는 문제는 주로 useEffect 또는 상태 관리 로직에서 발생할 수 있습니다. 이 문제는 실제로 삭제가 완료되었음에도 불구하고, 앞선 상태가 바로 반영되지 않아 생기는 현상입니다. 아래에 몇 가지 검토할 수 있는 사항을 안내드립니다:

1. 상태 관리 확인: 일기 항목을 삭제한 후, DiaryStateContext의 상태가 정확하게 업데이트되었는지 확인하세요. 다양한 상태 업데이트 방식 중 만약 useContext를 사용하고 있다면, 삭제 후의 상태가 즉시 커밋되어야 합니다.

2. useEffect 의존성 배열: 만약 useEffect를 사용하여 일기 데이터를 불러오고 있다면, 의존성 배열을 통해 상태가 변경될 때마다 리렌더링이 필요한지 확인해보세요. 의존성 배열에 데이터 상태를 추가하는 것도 한 방법입니다, 하지만 이 경우 오히려 무한 루프를 발생시킬 수 있으니 주의가 필요합니다.

3. 조건문 확인: 현재경고창(“존재하지 않는 일기입니다.”)을 띄우는 로직이 if 문 내에 있다면, 조건이 올바르게 설정되어 있는지도 검토해 보세요. 특히 데이터가 비어있는 상태인지 확인하는 조건이 잘못 설정되어 일어날 수 있습니다.

해당 강의에서 유사한 문제가 논의된 다른 답변들을 참고하시기를 권해드립니다.

• 수정 시 일기가 삭제됩니다.
  
• 삭제하기 질문 드립니다.
  

위 링크를 통해 비슷한 문제를 해결한 경험과 정보들을 참고하여 문제를 좀 더 깊이 이해하고 해결할 수 있을 것입니다. 추가적으로 궁금한 점이 있으시면, 답글로 남겨주시면 곧 강사님께서 답변해 주실 것입니다.

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