[React] 초급 개념8 - useEffect 훅 기본

useEffect는 리액트에서 컴포넌트의 생명주기(lifecycle) 를 다루기 위한 훅(Hook)으로, 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 작업을 수행할 수 있도록 도와줍니다.

---

 

 

🔸 1. useEffect란?

 

✅ 컴포넌트가 렌더링될 때 특정 작업을 수행하도록 설정하는 훅

• componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 대체
• API 호출, 구독(subscription), 이벤트 리스너 설정 등에서 유용하게 사용됨
• 렌더링 이후 실행되며, 의존성 배열을 통해 실행 시점을 제어할 수 있음

 

💡 용어 설명:

• 생명주기(Lifecycle): 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정.
• 마운트(Mount): 컴포넌트가 화면에 나타나는 순간.
• 언마운트(Unmount): 컴포넌트가 제거되는 순간.
• 의존성 배열(Dependency Array): useEffect가 언제 실행될지 결정하는 배열.

---

 

 

🔸 2. useEffect 기본 사용법

 

✅ 예제: 마운트될 때 실행

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("컴포넌트가 마운트되었습니다!");
  }, []);

  return <h1>안녕하세요!</h1>;
}

 

📌 설명:

• 빈 의존성 배열([])을 전달하면, 컴포넌트가 마운트될 때 한 번만 실행됨.
• console.log("컴포넌트가 마운트되었습니다!")가 한 번 실행됨.

💡 추가 설명:

• 의존성 배열이 없으면 컴포넌트가 리렌더링될 때마다 실행됨.

---

 

 

🔸 3. 특정 값이 변경될 때 실행

 

✅ 예제: 상태 값이 변경될 때 실행

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(`카운트 값이 변경됨: ${count}`);
  }, [count]);

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

 

📌 설명:

• count가 변경될 때마다 useEffect 내부 코드가 실행됨.
• 의존성 배열에 count를 추가하면, count 값이 변경될 때만 실행됨.

💡 추가 설명:

• 여러 개의 상태를 의존성 배열에 포함할 수도 있음: useEffect(() => {...}, [count, name])

---

 

 

🔸 4. 언마운트 시 실행 (정리 작업 수행)

✅ 컴포넌트가 제거될 때 실행하는 방법

 

✅ 예제: 이벤트 리스너 정리

import { useEffect } from "react";

function WindowWidthLogger() {
  useEffect(() => {
    const handleResize = () => {
      console.log(`창 크기 변경됨: ${window.innerWidth}px`);
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      console.log("이벤트 리스너가 제거되었습니다.");
    };
  }, []);

  return <h1>창 크기를 변경해보세요!</h1>;
}

 

📌 설명:

• window.addEventListener를 통해 창 크기 변경을 감지하는 이벤트 리스너를 추가.
• 언마운트될 때 (return 내부의 함수 실행) 이벤트 리스너를 제거하여 메모리 누수를 방지.

💡 추가 설명:

• API 요청을 취소하거나, 타이머를 정리할 때도 이 방법을 사용.

---

 

 

🔸 5. 개념 요약

 

✅ useEffect는 컴포넌트의 생명주기와 관련된 작업을 수행
✅ 의존성 배열([])을 통해 실행 시점을 제어할 수 있음
✅ 빈 배열([])이면 마운트될 때 한 번만 실행
✅ 의존성 배열에 상태를 추가하면 해당 값이 변경될 때 실행
✅ 클린업 함수(return)를 사용하여 언마운트 시 정리 작업 수행 가능
✅ API 호출, 이벤트 리스너 추가/제거, 타이머 정리 등에 활용됨

---