[250127]useEffect() 간단 정리

오늘은 React의 useEffect 훅에 대해 공부한 내용을 정리해보려고 합니다. useEffect는 React 함수형 컴포넌트를 관리하기 위해 사용되는 훅입니다.

useEffect 사용 시기

• 컴포넌트 마운트/언마운트 시: 빈 의존성 배열([])을 사용하여 컴포넌트가 마운트될 때 한 번만 코드를 실행하고, 언마운트될 때 정리 작업을 수행할 수 있습니다.

• 특정 상태나 프로퍼티 변경 시: 의존성 배열에 특정 상태나 프로퍼티를 넣어 해당 값이 변경될 때마다 코드를 실행할 수 있습니다.

• 사이드 이펙트 관리: 데이터 fetching, 구독 설정, 타이머 설정 등 컴포넌트의 렌더링과 직접적인 관련이 없는 작업을 수행할 때 사용합니다.

useEffect 기본 사용법

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행될 코드
    console.log('마운트시 실행');

    // 컴포넌트가 언마운트될 때 실행될 정리 함수
    return () => {
      console.log('언마운트시 실행');
    };
  }, []); // 의존성 배열로 해당 값이 있으면 해당 값의 변경으로 코드 실행 유무를 측정

  return <div>App</div>;
}

의존성 배열

useEffect의 두 번째 인자인 의존성 배열은 useEffect가 언제 실행될지를 결정하는 중요한 역할을 합니다. 이 배열에 포함된 값들이 변경될 때마다 useEffect 내부의 코드가 다시 실행됩니다. 의존성 배열을 어떻게 설정하느냐에 따라 useEffect의 동작 방식이 크게 달라지기 때문에, 이를 잘 이해하는 것이 중요합니다.

빈 배열이 사용되는 경우

의존성 배열로 빈 배열을 전달하면 컴포넌트가 마운트 될 때 한 번만 실행되고 언마운트 될 때에 return 값에 함수를 주어 정리 함수를 실행합니다. 이는 주로 데이터 fetch나 이벤트 리스너 같은 기능을 합니다.

의존성 배열을 생략하는 경우

의존성 배열을 아예 생략하면, useEffect는 컴포넌트가 렌더링될 때마다 실행됩니다. 이는 성능 문제를 일으킬 수 있습니다.

마무리

useEffect()는 React에서 사용되는 강력한 훅으로 의존성 배열의 유무, 값등 경우에 따라 실행 시점이 달라지므로 상황에 맞게 적절히 잘 사용하면 좋은 훅입니다. 많은 훅이 있지만 useState와 useEffect는 집중하여 공부해야할 것 같습니다.