[React 오류] React Hook useEffect has a missing dependency: ' '. Either include it or remove the dependency array react-hooks/exhaustive-deps

 

⚠️ React Hook useEffect has a missing dependency: '    '. Either include it or remove the dependency array  react-hooks/exhaustive-deps

 

 

---

상황

  
  const MainDish = (props) => {
  	const [data, setData] = useState([]);
    
    useEffect(() => {
    loadData(setData, props._dishType);
  	}, []);
    
    return data.map((dish,i)=>{
    	<Card title={dish.title} />
     	}
     );
     
 }

 

React Hook인 useEffect를 이용해 data를 뿌려주는 상황

useEffect  내부에 loadData라는 함수를 사용하고 있음

 

<loadData>

const loadData = async (setState, type, hash) => {

  };
  
  //중략

  if (type === 'detailDish') {
    const dataBody = initialData.data;
    return setState(dataBody);
  }
  //중략 type -> setState하는  상황
  
  setState(dataBody);
};

loadData 내부의 함수가 type(dataBody)라는 변수를 사용해 data를 리렌더링 하고 있기 때문에 

useEffect에 해당 값을 넣어 줘야 한다.

 

 

 

 

---

해결 방법

uesEffect의 [] 에 값 넣기

1) 일반적인 해결 

data를 넣어주기

  
  const MainDish = (props) => {
  	const [data, setData] = useState([]);
    
    useEffect(() => {
    loadData(setData, props._dishType);
  	}, [data]);
    
    return data.map((dish,i)=>{
    	<Card title={dish.title} />
     	}
     );
     
 }

 

 

2) data에 들어가는 값이 props 일때

  
  const MainDish = (props) => {
  	const [data, setData] = useState([]);
    
    useEffect(() => {
    loadData(setData, props._dishType);
  	}, [props._dishType]);
    
    return data.map((dish,i)=>{
    	<Card title={dish.title} />
     	}
     );
     
 }

현재 나는 MainDish 를  다른 component에서 불러와 사용하고 잇으며,

상위 component에서 props type을 지정 -> 그 type의 data 전달 하고 있으므로 

useEffect에서 신경써야할(?) 값으로 props._dishType을 넣음으로써 해결했다.

 

참고:kyounghwan01.github.io/blog/React/exhaustive-deps-warning/#_1-useeffect%E1%84%82%E1%85%A2-state%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%82%E1%85%A5%E1%87%82%E1%84%8B%E1%85%A5%E1%84%8C%E1%85%AE%E1%86%B7