Warning: React Hook useEffect has a missing dependency: 'setData'. Either include it or remove the dependency array.

Next.js

Warning: React Hook useEffect has a missing dependency: 'setData'. Either include it or remove the dependency array.

김영수 2024. 5. 17. 22:35

터미널에서 경고창에 이런 문구가 올라올때...

Warning: React Hook useEffect has a missing dependency: 'setData'. Either include it or remove the dependency array.

원래 코드

User
import { fetchSearchResults } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";
import {  useEffect, useState } from "react";
import Searchbar from "@/components/Searchbar";
import CountryList from "@/components/CountryList";
import Head from "next/head";

export default function Search () {

    const router = useRouter()
    const { q } = router.query;

    const [countries, setCountries] = useState([]);

    const setData = async() => {
        const data = await fetchSearchResults(q);
        setCountries(data);    //q로 불러온 결과를 setCountries 에 저장해 준다.
    };

    useEffect(()=>{
        if(q){
            setData();
        }
    },[q]);

    return (
        <>  
            <Head>
                <title>NARAS 검색 결과</title>
                <meta property="og:image" content="/thumbnail.png" />
                <meta property="og:title" content="NARAS" />
                <meta property="og:description" content="전 세계 국가들의 정보를 확인해보세요" />
            </Head>
            <Searchbar q={q} />
            <CountryList countries={countries} />  
        </>
    );
}
Search.Layout = SubLayout;

수정후 코드:

import { fetchSearchResults } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";
import {  useEffect, useState, useCallback } from "react";
import Searchbar from "@/components/Searchbar";
import CountryList from "@/components/CountryList";
import Head from "next/head";

export default function Search () {

    const router = useRouter()
    const { q } = router.query;

    const [countries, setCountries] = useState([]);

    const setData = useCallback(async() => {
        const data = await fetchSearchResults(q);
        setCountries(data);      //Store the results fetched by query q into setCountries. 쿼리 q로 가져온 결과를 setCountries에 저장합니다.
    },[q]);              // Dependency on q ensures setData is only re-created when q changes.
                           q에 대한 종속성은 q가 변경될 때만 setData가 다시 생성되도록 보장합니다.
    useEffect(()=>{
        if(q){
            setData();
        }
    },[q, setData]);      // Now, setData is also included in the dependency array.
                              이제 setData도 종속성 배열에 포함됩니다.
    return (
        <>  
            <Head>
                <title>NARAS 검색 결과</title>
                <meta property="og:image" content="/thumbnail.png" />
                <meta property="og:title" content="NARAS" />
                <meta property="og:description" content="전 세계 국가들의 정보를 확인해보세요" />
            </Head>
            <Searchbar q={q} />
            <CountryList countries={countries} />  
        </>
    );
}

Search.Layout = SubLayout;

수정후 다시 빌드 시키면

npm run build

터미널에서 실행 결과를 보여준다.

npm run build

> section122@0.1.0 build
> next build

   ▲ Next.js 14.1.0

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
   Generating static pages (0/7)  [    ]KOR 페이지 생성!
   Generating static pages (1/7)  [=   ] 
 ✓ Generating static pages (7/7) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                                   Size     First Load JS
┌ ● / (1130 ms)                                 1.66 kB        83.8 kB
├   └ css/56ef7acf6a666ee2.css                  352 B
├   /_app                                       0 B            78.2 kB
├ ○ /404                                        181 B          78.4 kB
├ λ /api/hello                                  0 B            78.2 kB
├ ● /country/[code] (ISR: 3 Seconds) (2295 ms)  1.13 kB        83.2 kB
├   └ css/0a756eec20a9871e.css                  305 B
├   ├ /country/ABW (1051 ms)
├   └ /country/KOR (980 ms)
└ ○ /search                                     20.2 kB         102 kB
    └ css/28245855e53fa023.css                  412 B
+ First Load JS shared by all                   78.5 kB
  ├ chunks/framework-5429a50ba5373c56.js        45.2 kB
  ├ chunks/main-930135e47dff83e9.js             31.8 kB
  └ other shared chunks (total)                 1.53 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
   (ISR)      incremental static regeneration (uses revalidate in getStaticProps)
λ  (Dynamic)  server-rendered on demand using Node.js

경고문구 완벽하게 해결!

2024.0517