[TIL] React Hook useEffect has a missing dependency

📑 리액트 오류 “React Hook useEffect has a missing dependency”

노마드코더 #7.6 Parameters 까지 강의를 들었다.
마지막에 니꼬쌤이 해보라는거 하는데 음 .. ? 왜 나는 안되지…?
useState사용해서 배열 할당하는 작업이었는데,,
그냥 콘솔창에 찍으면 배열이 나오는데 setState해주면 배열이 state에 안들어가는거다.
해당 코드는 아래와 같다.

const [details, setDetails] = useState([]);
const { id } = useParams();
const getMovie = async () => {
  const json = await (
    await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
  ).json();
  console.log(json.data.movie);
  setDetails(json.data.movie);
  console.log(details);
};
useEffect(() => {
  getMovie();
}, []);

그리고 콘솔에서 확인하면 아래처럼 나온다.

대체 왜 일까?
대체 왜 내껀 안들어갈까?
다른 사람들은 어떻게 넣었을까?
강의 댓글들도 확인해봤지만 알 수 없었다.
그리고 ‘이런 문제조차 해결하지 못하다니 .. 나는 useState도 사용하지 못하는 바보야’
‘아니 이렇게 사용하는게 맞는데 왜 안들어가냐고 이거 내 문제가 아니야!’
하는 자아 분열의 사이에서 의욕을 잃고 며칠동안 널부러져있다가
그래 그래도 해결해야지. 해결하지 못하는 문제는 없어.
하는 생각으로 npm start를 하는 그 순간.
터미널에서 경고를 하나 발견했다!
바로 경고를 복사해서 구글링했다.
그 경고는 바로
React Hook useEffect has a missing dependency
이거였다.

👉참고 블로그

exhaustive-deps-warning 해결법

구글링을해서 위의 블로그를 참고해보았다.
해당 오류는 react hook을 사용하다보면 많이 볼 수 있는 경고라고 한다.
useEffect안에 사용하고있는 state를 추가시켜 달라는 의미이다.
해결 방법은 두 가지가 있다.

⚡ 1. useEffect에 state 넣어주기.

useEffect(() => {
  getMovie();
}, [details]);

useEffect를 배울 때 뒤에 대괄호 부분을 지켜보다가 해당 변수가 업데이트되면 useEffect의 함수가 실행된다고 배웠다.
그 전에 내 코드에서는 대괄호부분이 비어있으니 처음 화면 로딩시에만 실행이 되고 setDetails 됐을 때 실행이 안된건가보다.
코드를 위와 같이 바꾸고 다시 실행하니 다시 문제가 생겼다…

계속계속 안멈추고 콘솔에 찍히고 있다.
그러면서 리액트 디벨로퍼툴로 해당 부분이 계속계속 리렌더링 하고 있는 것을 확인할 수 있었다…
끔찍하다…

⚡ 2. useEffect 내부에 함수를 정의한 경우.

블로그 글을 참고해서 유추해보자면
useEffect 안에서 사용하고있는 getMovie가 변수를 사용하고있기 때문에 해당 값을 넣어줘야 경고가 나오지 않는다.

useEffect(() => {
  getMovie();
}, [getMovie, id]);

useEffect부분을 위처럼 바꾸고 실행해봤지만 첫 번째 수정과 같은 반복되는 결과가 나왔다..ㅠ
제발 해결책이 더 나와있기를… 하며 스크롤을 내렸는데 useCallback을 이용하는 방법이 나왔다.

⚡ 2-2. useCallback.

useCallback을 사용하지 않으면 컴포넌트가 리렌더링 될 때마다 계속해서 함수를 만들게 되고, 새로운 참조값을 받기 때문에 반복적으로 함수를 실행하게 된다고 한다.
하지만 useCallback을 정의하면 params가 바뀔때 만 함수가 실행되어서 불필요한 함수 생성과 실행을 막을 수 있다.

const [details, setDetails] = useState([]);
const { id } = useParams();
const getMovie = useCallback(async () => {
  const json = await (
    await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
  ).json();
  console.log(json.data.movie);
  setDetails(json.data.movie);
  console.log(details);
}, [id]);
useEffect(() => {
  getMovie();
}, [getMovie]);

useEffect(() => {
  getMovie();
}, [getMovie, id]);

이거다..! 하는 마음으로 위처럼 코드를 수정해서 다시 실행해보았다.
하지만… 다시 처음으로 돌아갔다..ㅠㅠ
details는 비어있다…
아래 useEffect부분을 두 번째 처럼 바꿔서도 해봤지만 안된당..허허

이것 저것 바꿔가며 자세히 보니 useEffect안의 console.log가 먼저 찍히고 나서 getMovie의 console.log가 찍힌걸 확인했다..
그렇다는 말은 useEffect가 실행되고 그 다음에 getMovie가 실행되니까 useParams로 받은 id가 바뀔때 콘솔에 찍힐 수 있도록 순서를 조금 바꿔서 다시 실행해봤다.

function Detail() {
  const [loading, setLoading] = useState(true);
  const [details, setDetails] = useState([]);
  const { id } = useParams();

  console.log(details);

  useEffect(() => {
    const getMovie = async () => {
      const json = await (
        await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
      ).json();
      console.log(json.data.movie);
      setDetails(json.data.movie);
      setLoading(false);
    };
    getMovie();
  }, [id]);
  return null;
}

이렇게 하고 나니까 먼저 아무것도 없던 빈 배열이 먼저 출력되고 그 다음에 콘솔에 출력된 가져온 api의 배열, 그 다음에 setDetails에 넣어주고 다시 console.log(details) 가 실행됐다.

사실? 어떻게 된 영문인지는 잘 모르겠습니다만?
이게 문제가 해결된 것인지..?
영 찝찝하다.