useEffect 훅은 함수형 컴포넌트의 라이프사이클을 기반으로 사이드 이펙트를 수행할 수 있게 해줍니다

 

React에서 useEffect 훅은 함수형 컴포넌트의 라이프사이클을 기반으로 사이드 이펙트를 수행할 수 있게 해줍니다. 이는 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메서드의 대체재 역할을 합니다.

useEffect의 기본 문법은 다음과 같습니다:

useEffect(() => {
  // 사이드 이펙트 코드
  return () => {
    // 정리 코드 (선택적)
  };
}, [의존성 배열]);

useEffect 훅의 다른 부분에 대한 설명은 다음과 같습니다:

첫 번째 매개변수는 사이드 이펙트 코드를 포함하는 함수입니다. 이 코드는 컴포넌트가 렌더링된 후에 실행됩니다. 데이터 가져오기, 구독 설정, DOM 수동 변경 등의 작업을 포함할 수 있습니다.

선택적인 두 번째 매개변수는 의존성 배열(dependency array)입니다. 이 배열은 언제 효과가 실행될지를 지정합니다. 의존성 배열이 비어있으면 효과는 한 번만 실행되며, componentDidMount와 유사합니다. 배열에 의존성이 포함되어 있다면, 의존성이 변경될 때마다 효과가 실행되며 componentDidUpdate와 유사합니다.

효과 함수 내부에서는 정리(clean-up) 함수를 반환할 수 있습니다. 이 정리 함수는 컴포넌트가 언마운트될 때 또는 의존성이 변경되어 효과가 다시 실행될 때 호출됩니다. 이를 통해 효과가 생성한 리소스나 구독을 정리할 수 있습니다.

다음은 useEffect를 컴포넌트에서 사용하는 예시입니다:

 

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 사이드 이펙트 코드
    console.log('컴포넌트가 마운트되었습니다.');

    return () => {
      // 정리 코드
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []); // 의존성 배열이 비어있음, 마운트 시에 한 번 실행됨

  return <div>나의 컴포넌트</div>;
};

export default MyComponent;

이 예시에서 useEffect 내부의 효과 코드는 컴포넌트가 마운트될 때 한 번 실행됩니다. "컴포넌트가 마운트되었습니다."라는 로그가 콘솔에 출력됩니다

 

마운트된 컴포넌트는 사용자에게 보여지고 상호작용할 수 있게 됩니다. 따라서 useEffect 훅에서 의존성 배열을 빈 배열로 설정하여 효과를 마운트 시에 한 번만 실행하도록 하는 것은, 컴포넌트가 처음으로 화면에 나타날 때만 해당 효과를 수행하고자 할 때 유용한 방법입니다.