삭제하기 질문 드립니다.

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.15) Edit 페이지 구현하기

작성

수정됨

  const onClickDelete = () => {
    if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) {
      onDelete(params.id);
      nav("/", { replace: true });
    }
  };

useDiary.jsx 커스텀 훅 작업하고 나서,

삭제하기 하면 '존재하지 않는 일기입니다' alert이 발생합니다. data가 변화가 되어서 그런거 같은데.. 어떻게 해결하면 좋을까요?

삭제 후, 리렌더링 되면서 nav("/") 되기 전에,

const curDiaryItem = useDiary(params.id);

커스텀훅에서 체크가 되는거 같은데, 뭘 확인을 해봐야할까요?ㅎ

const useDiary = (id) => {
  const nav = useNavigate();
  const data = useContext(DiaryStateContext);

  const [curDiaryItem, setCurDiaryItem] = useState();

  useEffect(() => {
    const currentDiaryItem = data.find(
      (item) => String(item.id) === String(id)
    );

    if (!currentDiaryItem) {
      window.alert("존재하지 않는 일기입니다.");
      nav("/", { replace: true });
    }

    setCurDiaryItem(currentDiaryItem);
  }, [id, data]);

  return curDiaryItem;
};

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨

질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)

질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요

- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

javascript react node.js

답변 4

이정환 Winterlood

지식공유자

안녕하세요 문제의 원인을 추가 확인하여 답글 달아드립니다!

===

문제의 원인은 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 훅이 다시 호출되지 않습니다. 이로인해 페이지에 처음 진입하는 상황에서만 "존재하지 않는 일기입니다" 얼럿이

예진안

저도 같은 상황인데 혹시 해결하셨을까요?

이정환 Winterlood

지식공유자

추가된 답글 확인부탁드립니다

이정환 Winterlood

지식공유자

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

우선 올려주신 코드로는 문제가 없어보입니다.

혹시 ReactStrictMode가 설정되어 있지는 않은가요?

이 모드가 활성화되면 컴포넌트의 중복 렌더링이 발생해 실습중 다양한 문제가 발생할 수 있기 때문에

현재 우리 강의에서는 이 모드를 해제하는 쪽으로 안내드리고 있습니다.

따라서 main.jsx 파일에 ReactStrictMode가 설정되어 있지는 않은지 확인해보시고 답글로 알려주시면 감사하겠습니다.

limyangchae

질문자

main.jsx 에서는 router만 설정이 되어있습니다.

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

제가 질문한 내용을 흐름으로 적어봤는데, 이해한게 맞을까요?

(강의의도) 삭제 -> 루트이동

(질문현상) 삭제 -> id없음 -> 사용자훅 -> 알럿발생 -> 루트이동

이정환 Winterlood

지식공유자

네 강의 의도는 적어주신대로 삭제 -> 인덱스 페이지로 이동이 맞습니다.

정확한 문제 원인 파악을 위해서는 프로젝트 전체 코드가 있어야 할 것 같아요

혹시 GitHub 등을 통해 링크로 전달해주실 수 있을까요?

답글로 남겨주시면 감사하겠습니다.

인프런 AI 인턴

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

삭제 기능을 구현하실 때 ‘존재하지 않는 일기입니다’라는 경고창이 발생하는 이유는 아마도 일기 데이터를 관리하는 로직과 관련이 있을 수 있습니다. 이 문제를 해결하기 위해 몇 가지 확인해야 할 사항이 있습니다:

데이터 상태 확인: 삭제 기능이 실행되면 상태가 즉시 변경되어 화면에 반영되는지 확인하세요. 삭제 이후에도 여전히 관련 데이터가 남아 있거나, 그로 인한 상태 업데이트가 제대로 되지 않아서 발생할 수 있습니다.
useEffect 확인: ‘존재하지 않는 일기입니다’라는 경고창이 뜨는 부분이 useEffect 내에서 발생한다면, 해당 부분의 의존성 배열을 확인하고 삭제 후 상태가 업데이트되는 것과 연관성이 있는지 검토해보세요.
id의 일관성 확인: 커스텀 훅(useDiary)의 로직에서 id를 통해 데이터를 찾으려고 할 때, id 값이 일치하지 않아서 경고창이 발생할 수 있습니다. 삭제 후에도 id 값이 초기화되지 않았거나, 새롭게 받아오는 데이터의 id와 비교가 맞지 않는 경우입니다.

관련하여 이전에 다루었던 비슷한 문제의 해결 사례를 참고하시기를 권장드립니다. 아래와 같은 링크를 참고하시면 문제 해결에 도움이 되실 것 같습니다:

이 링크들은 비슷한 상황에서 해결 방안을 제시하고 있으며, 실제 코드를 통해 문제를 더욱 구체적으로 파악할 수 있습니다.

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

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

삭제하기 질문 드립니다.