useEffect의 의존성 배열

의존성 배열 없이 useEffect 사용

-> useEffect 내부의 콜백 함수는 컴포넌트가 렌더링될 때마다 실행됨! 

= 컴포넌트가 처음 마운트 될 때뿐만 아니라, 컴포넌트가 업데이트 될 때마다 useEffect가 호출되는 것!

useEffect(() => {
  console.log('컴포넌트가 렌더링될 때마다 호출');
});

빈 의존성 배열을 사용한 useEffect 사용

-> useEffect 내부의 콜백 함수는 컴포넌트가 처음 마운트될 때 딱 한 번만 실행됨!

-> 컴포넌트가 다시 렌더링되어도, useEffect는 다시 실행되지 않음!

useEffect(() => {
  console.log('컴포넌트가 처음 마운트될 때만 호출');
}, []);

의존성 배열에 변수를 포함시킨 경우

-> 해당 변수가 변경될 때마다 useEffect 내부의 콜백 함수가 실행됨!

const [count, setCount] = useState(0);

useEffect(() => {
  // count가 변경될 때마다 호출됨
  console.log(`Count가 ${count}로 변경되었습니다.`);
}, [count]); // 의존성 배열에 count를 포함시킴