9 React useEffect 훅과 라이프사이클 완벽 정리

 React의 useEffect 훅은 컴포넌트의 생명주기(lifecycle)와 관련된 작업을 수행할 때 사용됩니다. 이를 활용하면 마운트, 업데이트, 언마운트 시점에서 특정 로직을 실행할 수 있습니다.

1. useEffect 훅 기본 개념

useEffect는 React 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다. 주로 데이터 가져오기(API 호출), DOM 업데이트, 타이머 설정과 같은 작업을 수행할 때 활용됩니다.

기본 문법

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('컴포넌트가 렌더링되었습니다.');
  });

  return <div>useEffect 기본 사용법</div>;
}

위 코드는 ExampleComponent가 렌더링될 때마다 useEffect 내부의 코드가 실행됩니다.

---

2. 마운트, 업데이트, 언마운트 타이밍 다루기

가. 마운트 시점에서 실행

컴포넌트가 처음으로 렌더링될 때만 실행하고 싶다면 useEffect의 두 번째 인자로 빈 배열([])을 전달합니다.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
}, []); // 빈 배열을 전달하면 최초 1회만 실행됨

이렇게 하면 컴포넌트가 마운트될 때 한 번만 실행됩니다.

---

나. 업데이트 시점에서 실행

특정 상태(state)가 변경될 때마다 실행되도록 만들려면 useEffect의 두 번째 인자로 해당 상태를 배열에 추가합니다.

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

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

  useEffect(() => {
    console.log(`count 값이 변경됨: ${count}`);
  }, [count]); // count 값이 변경될 때마다 실행됨

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

이렇게 하면 count 값이 변경될 때마다 useEffect가 실행됩니다.

---

다. 언마운트 시점에서 실행

컴포넌트가 제거될 때(clean-up)를 수행하려면 useEffect 내부에서 return 문을 사용하여 정리(clean-up) 함수를 반환하면 됩니다.

useEffect(() => {
  console.log('컴포넌트가 마운트됨');
  return () => {
    console.log('컴포넌트가 언마운트됨');
  };
}, []);

위 코드는 컴포넌트가 마운트될 때 실행되고, 컴포넌트가 제거될 때 정리(clean-up) 함수가 실행됩니다.

---

3. useEffect 훅을 활용한 실전 예제

가. API 호출 예제

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

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (

API 데이터

{JSON.stringify(data, null, 2)}

); }

위 코드는 API에서 데이터를 가져와 화면에 출력하는 간단한 예제입니다. 마운트될 때 한 번만 실행되도록 설정되었습니다.

---

나. 타이머 설정 예제

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 언마운트 시 타이머 정리
  }, []);

  return <p>타이머: {seconds}초</p>;
}

이 코드는 컴포넌트가 마운트되면 1초마다 seconds 값을 증가시키고, 언마운트되면 타이머를 정리합니다.

---

4. useEffect 사용 시 주의할 점

가. 의존성 배열 사용 시 주의

• 의존성 배열을 정확하게 설정하지 않으면 무한 루프가 발생할 수 있습니다.

useEffect(() => {
  console.log('무한 루프 발생!');
}, [Math.random()]); // 매번 새로운 값이 들어가면서 무한 실행됨

나. 불필요한 렌더링 방지

• 불필요한 상태 변경이 발생하면 useEffect가 여러 번 실행될 수 있습니다. 이를 방지하려면 상태 변경 로직을 최적화해야 합니다.

---

5. 정리

React의 useEffect 훅을 활용하면 컴포넌트의 라이프사이클을 효과적으로 관리할 수 있습니다.

1. 마운트 시 실행 → useEffect(() => {}, [])
2. 업데이트 시 실행 → useEffect(() => {}, [state])
3. 언마운트 시 실행 → useEffect(() => { return () => {}; }, [])

또한 API 호출, 타이머 설정 등의 다양한 기능을 처리할 수 있으며, 의존성 배열을 올바르게 설정하여 최적화하는 것이 중요합니다.

위 개념을 활용하여 React 프로젝트에서 효과적으로 상태 관리 및 비동기 작업을 처리해 보세요.