[React] React Hook useEffect has a missing dependency 오류 해결

 

* 상황

 

import React, { useEffect, useState } from "react";
import { Descriptions } from "antd";

function DataInfo(props) {
  const [Data, setData] = useState({});

  useEffect(() => {
    setData(props.detailData);
    console.log(props.detailData);
  }, []);

  return (
    <div>
      <Descriptions title="상품 Product Info" bordered>
      //변경 시 오류
        <Descriptions.Item label="price">{Data.price}</Descriptions.Item> 
        <Descriptions.Item label="Seasons">
          {props.datailData.seasons}
        </Descriptions.Item>
        <Descriptions.Item label="Description">
          {props.datailData.description}
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
}

export default DataInfo;

 

-> useEffect를 통해 Data값 전달 시 

' React Hook useEffect has a missing dependency' 오류 발생

 

 

* 원인

- useEffect 안에 setData가 props.defailData 사용

 

* 해결 

 

//수정 전
useEffect(() => {
    setData(props.detailData);
    console.log(props.detailData);
  }, []);
  

//수정 후
useEffect(() => {
    setData(props.detailData);
    console.log(props.detailData);
  }, [props.detailData]);

 

* 참고 출처 : (https://rrecoder.tistory.com/124)