반응에 종속성 배열이 있거나 없는 useEffect

내가 react를 막 시작할 때 내가 직면한 문제는 state 또는 props가 변경될 때마다 react의 useEffect 후크가 호출된다는 것이었습니다.

import React, { useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(0);
  React.useEffect(() => {
    console.log("useEffect called!");
  });
  return (
    <div className="App">
      <label>count </label>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>
      <hr />
      <label>data </label>
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        {data}
      </button>
    </div>
  );
}

})

위의 스니펫에는 종속성 배열이 없으므로 state 또는 props가 변경될 때마다 호출됩니다.
이 문제를 해결하기 위해 종속성 배열을 사용할 수 있습니다.

//rest of the code is same 
 React.useEffect(() => {
    console.log("useEffect called!");
  },[data]); //adding dependency array

위 스니펫에는 종속성 배열이 있으므로 구성 요소가 마운트될 때만 먼저 호출되고 해당 배열의 종속성(데이터)이 변경되면 두 번째로 호출됩니다.
또한 둘 이상의 종속성이 있을 수 있습니다.