[error] React Hook useEffect has a missing dependency: 'config'. Either include it or remove the dependency array. 해결방법

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

이런 리액트 훅 에러가 발생함

---

오류원인

오류의 원인은 작성한 ' useEffect내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문이다.

  // init render block
  useEffect(()=>{
    const config = {
      plugins:[ChartDataLabels], 
      type: 'bar',
      data: {
        labels: UserData.map((data) => data.year),
        datasets: [
          {
            label: "Users Gained",
            data: UserData.map((data) => data.userGain),
            backgroundColor: [
              "rgba(75,192,192,1)",
              "#ecf0f1",
              "#50AF95",
              "#f3ba2f",
              "#2a71d0",
            ],
            borderColor: "black",
            borderWidth: 2
          },
        ],},
      options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Bar Chart Example'
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
            datalabels: {
                color: '#000',
                align: 'end',
                anchor: 'end',
                offset: 5,
                display: function(context) {
                    return context.dataset.data[context.dataIndex] !== 0;  // do not show zero values
                },
                formatter: function(value) {
                    return value;
                }
            }
        }
    }
    };
  const myChart = useRef() 
     new Chart(
      myChart.current,
      config
    );
  },[])

---

오류해결

  const myChart = useRef() 
  // init render block
  useEffect(()=>{
    const config = {
      plugins:[ChartDataLabels], 
      type: 'bar',
      data: {
        labels: UserData.map((data) => data.year),
        datasets: [
          {
            label: "Users Gained",
            data: UserData.map((data) => data.userGain),
            backgroundColor: [
              "rgba(75,192,192,1)",
              "#ecf0f1",
              "#50AF95",
              "#f3ba2f",
              "#2a71d0",
            ],
            borderColor: "black",
            borderWidth: 2
          },
        ],},
      options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Bar Chart Example'
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
            datalabels: {
                color: '#000',
                align: 'end',
                anchor: 'end',
                offset: 5,
                display: function(context) {
                    return context.dataset.data[context.dataIndex] !== 0;  // do not show zero values
                },
                formatter: function(value) {
                    return value;
                }
            }
        }
    }
    };

     new Chart(
      myChart.current,
      config
    );
  },[])