로고

Effect 훅: React에서 부수 효과를 다루는 useEffect 이해하기.

작성일 :

Effect 훅: React에서 부수 효과를 다루는 useEffect 이해하기

React는 컴포넌트 기반의 사용자 인터페이스(UI)를 구축하는 데 쓰이는 인기 있는 JavaScript 라이브러리입니다. React 컴포넌트는 상태(state)와 속성(props)을 사용해 동적인 UI를 생성할 수 있습니다. 하지만, 때때로 컴포넌트가 렌더링될 때 또는 상태나 속성이 변경될 때 특정 부수 효과(side effect)를 처리해야 할 때가 있습니다. 이러한 경우에 React의 useEffect 훅이 매우 유용합니다.

useEffect 훅의 기본 개념

useEffect 훅은 함수 컴포넌트에서 부수 효과를 처리할 수 있도록 해줍니다. 여기서 부수 효과란, 컴포넌트가 렌더링된 이후에 수행해야 하는 작업들을 의미합니다. 예를 들면, 데이터 fetching, DOM 조작, 구독 설정 등이 있습니다. useEffect는 기본적으로 다음과 같이 사용됩니다:

javascript
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 여기에 부수 효과 로직을 작성합니다.
    console.log('컴포넌트가 렌더링되었습니다.');
  });

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

위 예제에서는 useEffect를 사용해 컴포넌트가 렌더링된 후 콘솔에 메시지를 출력하는 부수 효과를 추가했습니다. useEffect는 기본적으로 컴포넌트가 처음 마운트될 때와 업데이트될 때 호출됩니다.

의존성 배열

useEffect 훅의 두 번째 인수로 의존성 배열(dependency array)을 전달하여 부수 효과가 언제 실행될지 제어할 수 있습니다. 의존성 배열 안에 있는 값이 변경될 때만 부수 효과가 실행됩니다. 예를 들어, 다음 코드를 보겠습니다:

javascript
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`현재 카운트: ${count}`);
  }, [count]); // count가 변경될 때마다 이 효과가 실행됩니다.

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

여기서 count가 업데이트될 때마다 콘솔에 메시지가 출력됩니다. 의존성 배열이 비어있을 경우, 부수 효과는 컴포넌트가 처음 마운트될 때만 실행됩니다:

javascript
useEffect(() => {
  console.log('컴포넌트가 처음 마운트되었습니다.');
}, []); // 빈 배열, 즉 한 번만 실행

정리 함수

부수 효과에서 생성된 자원을 정리(clean up)해야 하는 경우가 있습니다. 예를 들어, 타이머를 해제하거나 이벤트 리스너를 제거해야 할 수 있습니다. 이를 위해 useEffect는 정리 함수를 반환할 수 있습니다. 다음은 그 예입니다:

javascript
useEffect(() => {
  const timer = setTimeout(() => {
    console.log('타이머가 완료되었습니다.');
  }, 1000);

  // 정리 함수 반환
  return () => {
    clearTimeout(timer);
    console.log('타이머가 정리되었습니다.');
  };
}, []); // 마운트될 때 실행된다가 언마운트될 때 정리

이 예제에서는 컴포넌트가 언마운트될 때 타이머가 해제됩니다. 이를 통해 메모리 누수와 같은 문제를 방지할 수 있습니다.

여러 개의 useEffect

하나의 컴포넌트에서 여러 개의 useEffect를 정의할 수도 있습니다. 이는 코드의 가독성을 높이고 각 부수 효과를 독립적으로 관리할 수 있게 합니다. 예를 들어:

javascript
useEffect(() => {
  console.log('첫 번째 부수 효과 실행');
}, [dependency1]);

useEffect(() => {
  console.log('두 번째 부수 효과 실행');
}, [dependency2]);

각 useEffect는 자신의 의존성에 따라 독립적으로 실행됩니다.

고급 사용법

조건부 실행

부수 효과가 특정 조건에서만 실행되도록 하고 싶을 때가 있습니다. 이를 위해 if 문을 사용할 수 있습니다:

javascript
useEffect(() => {
  if (someCondition) {
    console.log('조건이 참일 때만 실행됩니다.');
  }
}, [someCondition]);

비동기 작업

부수 효과는 비동기 작업을 포함할 수 있습니다. 다만, useEffect 자체를 비동기 함수로 만들 수는 없습니다. 대신, 내부에서 비동기 함수를 호출할 수 있습니다:

javascript
useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  }

  fetchData();
}, []);

이 예제에서는 API로부터 데이터를 가져와 콘솔에 출력하는 부수 효과를 추가했습니다.

성능 최적화

효과적으로 useEffect를 사용하면 컴포넌트의 성능을 최적화할 수 있습니다. 불필요한 렌더링을 방지하려면 의존성 배열을 올바르게 설정하고, 정리 함수를 통해 메모리 누수를 방지해야 합니다.

결론

React의 useEffect 훅은 컴포넌트의 생명 주기 동안 부수 효과를 다루는 강력한 도구입니다. 기본 사용법부터 고급 활용법까지 다루어 봤으며, 다양한 예제를 통해 개념을 명확히 이해할 수 있도록 했습니다. 이 훅을 적절히 활용하여 보다 효율적인 React 컴포넌트를 작성하시길 바랍니다.