Diary.jsx

import { useContext, useState, useEffect } from "react";
import { DiaryStateContext } from "../App";
import { useNavigate } from "react-router-dom";

const useDiary = (id) => {
  const data = useContext(DiaryStateContext);
  const [currentDiaryItem, setCurrentDiaryitem] = useState();
  const nav = useNavigate();

  useEffect(() => {
    const currentDiaryItem = data.find(
      (item) => String(item.id) === String(id)
    ); 
    if (!currentDiaryItem) {
      window.alert("존재하지 않는 일기입니다."); 
      nav("/", { replace: true });
    }
    setCurrentDiaryitem(currentDiaryItem); 
  }, [id, data]);
  //data는 왜쓰는지?

  return currentDiaryItem;
};

export default useDiary;

강의 내용코드입니다. 현재의 일기를 가져오는 커스텀훅입니다.

여기서 문제는

"존재하지 않는 일기입니다"라는 경고창이 2번뜹니다. http://localhost:5173/diary/1234 처럼 아무숫자나 입력했을 때 그리고 http://localhost:5173/ 으로 이동한 후에 경고창이 한번 더 뜹니다. useEffect가 id가 변함에 따라 계속 실행되어서라는 이유로 알고 있습니다. 그러면 왜 선생님코드에서는 경고창이 2번 뜨지 않았을까용?
그리고 의존성 배열에 [id, data] 2가지를 담는 이유가 궁금합니다. 현재 prams.id가 바뀔 때만 작동하게 해도 되지 않을까요? 사용자가 data를 수정하면서 페이지의 파라미터가 바뀌는 상황이 동시에 일어나지 않을 거 같아서요

안녕하세요 이정환입니다. 순서대로 답변드릴게요

1) 경고창이 두번 뜨는 문제

결론부터 말씀드리자면 경고창은 한번만 떠야 정상입니다. ~/diary/333 같은 페이지로 접근했을 때에는 id의 값은 333으로 최초 고정된 이후 변화하지 않기에 경고창이 두번 발생하는 것은 뭔가 문제가 있는 것으로 보입니다.

혹시 main.jsx 파일에 StrictMode 컴포넌트를 제거하지 않으신게 아닌지 확인 부탁드립니다.

2) Deps에 id와 data를 둘 다 담는 이유

안정적인 향후 기능 구현을 위해 넣어두었습니다. 말씀하신대로 현재 단계에서는 data를 제거해도 문제가 되지는 않습니다. 삭제하셔도 무방합니다.

그러나 앞으로 localStorage에 일기 데이터를 보관하고 최초 접속시 꺼내와 State에 보관하는 과정에서 data의 값이 최초 빈 배열로 설정될 수 있으므로 현재는 설정되어 있는 상황입니다.

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