[리액트] useEffect()

useEffect() Hook은 리액트 컴포넌트에서 부수 효과를 수행하는 데 사용된다. 클래스 컴포넌트에서의 라이프사이클 메서드와 유사한 기능을 수행한다.

기본 사용법

useEffect()를 사용하면 렌더링 후에 코드를 실행할 수 있다. 이러한 방식은 특정 작업을 수행할 때 유용하다.

useEffect(() => {
  // 렌더링 후에 실행할 코드
});

의존성 배열

useEffect()의 두 번째 인수로 배열을 전달할 수 있다. 이 배열은 특정 값에 의존성을 가진다.

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

useEffect(() => {
  // count 값 변경 시 실행됨
}, [count]);

정리 함수

정리 함수는 컴포넌트가 언마운트될 때 정리 작업을 수행한다.

useEffect(() => {
  // 작업 수행

  return () => {
    // 정리 작업 수행
  };
}, []);

예시: 데이터 가져오기

useEffect()를 사용하면 API에서 데이터를 가져올 수 있다.

const [data, setData] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

useEffect() Hook은 리액트에서 다양한 부수 효과를 수행하는 데 있어서 중요한 도구이다. 의존성 배열과 정리 함수를 잘 활용하면 매우 강력한 도구가 될 수 있다.