• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

에러 문의 react hook useEffect

22.12.15 09:12 작성 조회수 988

0

src/components/Row.js

Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

쌤 그리고

fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??

답변 1

답변을 작성해보세요.

0

안녕하세요.

useEffect()는 종속성 배열에 있는 값이 바뀌면 다시 호출이 되게 됩니다.

그래서 현재 useEffect안에서 fetchMovieData 함수를 호출하는데

이 함수는 fetchUrl이 달라질 수 있습니다.

그래서 만약 이 값이 달라지면 한 번 더 useEffect가 호출돼서 fetchMovieData가 호출되어야 합니다.

하지만 우리가 만드는 앱에서는 fetchUrl이 하드 코딩된 값이라 변할 리가 없습니다.

그래도 이 경고 문구를 없애주려면

종속성 배열에 함수와 fetchUrl을 넣어주시면 됩니다.

  useEffect(() => {
    fetchMovieData();
  }, [fetchMovieData, fetchUrl]);

아니면 useCallback을 이용해주셔도 됩니다.

  const fetchMovieData = fetchMovieData(async () => {
    const request = await axios.get(fetchUrl);
    console.log("request", request);
    setMovies(request.data.results);
  },[fetchUrl]);

  useEffect(() => {
    fetchMovieData();
  }, [fetchMovieData]);


이런 식으로요!
감사합니다.

악보-Designer Park님의 프로필

악보-Designer Park

2024.01.23

const fetchMovieData = useCallback(() => {}, []);

이게 맞는거죠?