[React] useEffect 에 대하여

useEffect는 React의 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용하는 훅(hook)입니다. 사이드 이펙트란 컴포넌트의 렌더링 이외에 수행되어야 할 작업들을 의미합니다. 예를 들어, 데이터 가져오기(fetching data), 구독(subscription), DOM 조작 등이 사이드 이펙트에 해당합니다.

---

기본 사용법

useEffect 는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하게 합니다. 기본 형태는 다음과 같습니다:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 여기에 사이드 이펙트를 처리하는 코드를 작성
    console.log('컴포넌트가 렌더링되었습니다.');

    // 클린업 함수를 반환할 수 있음
    return () => {
      console.log('컴포넌트가 언마운트됩니다.');
    };
  });

  return (
    <div>
      <p>MyComponent</p>
    </div>
  );
}

위 예제에서 useEffect 안의 코드 블록은 컴포넌트가 처음 렌더링될 때와 이후 모든 업데이트에서 실행됩니다. useEffect는 기본적으로 모든 렌더링 후에 호출됩니다.

의존성 배열

useEffect는 두 번째 인수로 의존성 배열(dependency array)을 받을 수 있습니다. 이 배열에는 이펙트가 실행될 조건이 되는 상태나 props를 나열합니다. 의존성 배열이 있는 경우, 그 값이 변경될 때만 이펙트가 실행됩니다.

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

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

  useEffect(() => {
    console.log(`Count 값이 변경되었습니다: ${count}`);
  }, [count]); // count가 변경될 때만 이펙트가 실행됨

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

위 예제에서는 count가 변경될 때만 useEffect가 실행됩니다. 따라서 count가 업데이트될 때마다 콘솔에 로그가 출력됩니다.

 

마운트와 언마운트

useEffect를 빈 배열([])과 함께 사용하면, 컴포넌트가 마운트(처음 렌더링)될 때만 이펙트가 실행되고 언마운트(제거)될 때 클린업 함수가 호출됩니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');

    return () => {
      console.log('컴포넌트가 언마운트됩니다.');
    };
  }, []); // 빈 배열을 사용하여 마운트와 언마운트 시점에만 실행

  return (
    <div>
      <p>MyComponent</p>
    </div>
  );
}

 

데이터 가져오기 예제

useEffect는 데이터 가져오기 같은 비동기 작업을 처리하는 데도 자주 사용됩니다.

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('데이터 가져오기 실패:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 빈 배열을 사용하여 컴포넌트 마운트 시점에만 실행

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

이 예제에서는 컴포넌트가 마운트될 때 데이터를 가져오는 비동기 함수를 호출하고, 데이터를 가져온 후 상태를 업데이트합니다.

---

useEffect는 컴포넌트의 라이프사이클 동안 발생하는 사이드 이펙트를 관리하는 강력한 도구입니다. 의존성 배열을 활용하여 이펙트가 실행되는 시점을 제어하고, 클린업 함수를 통해 리소스를 정리할 수 있습니다. 이러한 기능을 통해 복잡한 사용자 인터페이스와 상호작용을 효율적으로 관리할 수 있습니다.