useEffect

컴포넌트를 외부 시스템에 연결하고 동기화할 수 있게 하는 hook
-> 네트워크, 브라우저 DOM, 애니메이션, UI 라이브러리 위젯, React가 아닌 코드를 다루는 것이 가능하다.

⭐ 외부 시스템이 관여하지 않는 경우, props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우에는 useEffect를 사용하지 않는다.

✅ 기본 사용법

useEffect(setup, dependecies)

• setup : Effect의 로직 함수, clean up(정리) 함수를 반환 할 수 있다.
  -> 정리 함수 : 리렌더링 되었을 경우 정리 함수를 실행한 후 새로운 값으로 setup 함수를 실행한다.

• dependecies : [dep1, dep2, dep3]의 형태로 setup 함수에서 참조되는 값.
  -> 생략할 경우 : 컴포넌트가 리렌더링 될 때마다 실행된다.
  -> [ ] 빈 의존성 배열: 초기 렌더링 이후 다시 실행되지 않는다.
  

export default function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() =>{
  	if (count !== 0) alert(`You clicked ${count} times!`);
  }, [count]);

  return (
    <button onClick={()=> setCount(count+1)}>
      Click me!
    </button>
  )
}

➕ clean up 함수
컴포넌트가 화면에서 사라질 때, 리소스 정리를 통해 메모리 누수를 방지할 때, effect 실행 순서를 제어해야 할 때 사용 된다.

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((count) => count + 1);
    },1000)
    
    // ⭐ cleanUp 함수
	return () => clearInterval(interval);
  }, []);

  return <h1>{count}</h1>;
}