React useEffect로 알아보는 컴포넌트 생명주기 제대로 이해하기

React useEffect로 컴포넌트 생명주기 제어하기

React에서 컴포넌트의 생명주기를 이해하는 것은 상태 관리와 상호작용을 최적화하는 데 필수적입니다. useEffect 훅은 이 생명주기를 쉽게 관리할 수 있도록 도와줍니다. 이번 글에서는 useEffect를 통해 컴포넌트의 마운트, 업데이트, 언마운트를 모두 살펴보겠습니다.

useEffect의 기본 개념 이해하기

useEffect는 리액트 훅 중 하나로, 사이드 이펙트를 처리합니다. 마운트, 업데이트, 언마운트의 단계에서 원하는 작업을 수행할 수 있도록 도와줍니다.

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component mounted');
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return <div>Hello World!</div>;
}

위 코드는 컴포넌트가 마운트될 때 콘솔에 메시지를 출력하고, 언마운트될 때 다른 메시지를 출력하는 예제입니다. 빈 배열 []은 의존성 배열로, 컴포넌트가 처음 렌더링될 때만 효과가 실행되도록 설정합니다.

마운트와 언마운트 시점에서 효과 사용하기

컴포넌트가 마운트될 때 초기 데이터를 가져오거나, 언마운트될 때 정리 작업을 수행할 때 useEffect는 매우 유용하게 사용됩니다.

• 데이터 페칭: API 호출이나 데이터를 요청하여 컴포넌트가 렌더링될 때 필요한 데이터를 가져옵니다.
• 이벤트 리스너 등록 및 해제: 예를 들어, 윈도우의 리사이즈 이벤트를 처리하거나, 외부 API의 WebSocket 연결을 관리할 때 사용합니다.

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

위 코드에서는 컴포넌트가 마운트될 때 리사이즈 이벤트 리스너를 등록하고, 언마운트될 때 해제합니다.

업데이트에서의 useEffect 활용

컴포넌트가 특정 상태값이나 prop이 바뀔 때마다 작업해야 할 경우, useEffect의 의존성 배열을 적극적으로 활용해야 합니다.

useEffect(() => {
  console.log(`Count changed: ${count}`);
}, [count]);

이 코드는 count 상태가 변경될 때마다 콘솔에 메시지를 출력합니다. count가 의존성 배열에 포함되어 있어 해당 상태가 업데이트될 때마다 효과가 실행됩니다.

의존성 배열을 사용한 최적화

의존성 배열을 적절히 활용하면 불필요한 효과 실행을 줄일 수 있습니다. 그러나 배열을 잘못 설정하면 무한 루프를 초래할 수 있으므로 주의가 필요합니다.

• 정의된 배열이 없는 경우: 모든 렌더링에서 실행되므로 조심해야 합니다.
• 부분 의존성 사용: 특정 상태나 prop이 바뀔 때만 실행하도록 제한할 수 있습니다.

결론

useEffect 훅은 React 컴포넌트의 생명주기를 관리하는 강력한 도구입니다. 이를 통해 상태와 효과를 적절히 조절하여 성능을 최적화할 수 있습니다. 여러분은 useEffect를 어떻게 활용하고 계신가요? 실전에서의 경험이 궁금합니다.