React useEffect 기능

 

 

 

React의 useEffect는 함수형 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 훅입니다. 컴포넌트가 렌더링될 때와 특정 상태나 props가 변경될 때, 또는 컴포넌트가 언마운트될 때 실행됩니다.

 

 

주요 사용 사례

• 데이터 가져오기 (API 호출)
• DOM 조작
• 구독 및 이벤트 리스너 설정
• 타이머 설정
• 리소스 정리 (예: 메모리 누수 방지)

---

 

기본 사용법

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

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

  // useEffect 사용
  useEffect(() => {
    console.log(`현재 카운트는 ${count}입니다.`);
  });

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

export default Example;

 

---

 

동작 방식

1. 기본 실행: useEffect는 컴포넌트가 렌더링된 이후에 실행됩니다.
2. 의존성 배열(Dependency Array)
   • 두 번째 매개변수로 전달된 배열에 따라 실행 조건이 결정됩니다.
   • 배열이 비어 있으면 마운트 시 한 번만 실행됩니다.
   • 배열에 특정 값이 있으면 해당 값이 변경될 때만 실행됩니다.

---

 

다양한 형태의 useEffect

 

1. 컴포넌트 마운트 시 한 번만 실행

useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
}, []); // 빈 배열

 

2. 특정 상태나 props 변경 시 실행

useEffect(() => {
  console.log("count가 변경되었습니다.");
}, [count]); // count가 변경될 때만 실행

 

3. 정리(Cleanup) 작업

• 이벤트 리스너 제거, 타이머 정리, 구독 해제 등

useEffect(() => {
  const timer = setInterval(() => {
    console.log("타이머 작동 중");
  }, 1000);

  return () => {
    clearInterval(timer); // 정리 작업
    console.log("타이머가 정리되었습니다.");
  };
}, []); // 마운트와 언마운트 시 실행

 

---

 

자주 사용하는 패턴

 

1. API 호출

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

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

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // 한 번만 호출

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

export default FetchData;

 

2. 이벤트 리스너 등록 및 해제

useEffect(() => {
  const handleResize = () => {
    console.log(`윈도우 크기: ${window.innerWidth}`);
  };

  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []); // 마운트/언마운트 시 실행

 

---

 

주의점

1. 무한 렌더링 방지
   • 의존성 배열을 정확히 설정해야 합니다.
   • 잘못된 상태 업데이트 로직이 있을 경우, 무한 렌더링이 발생할 수 있습니다.
2. 의존성 관리
   • 배열에 포함된 값은 함수 내부에서 사용하는 모든 상태나 props이어야 합니다.
   • React ESLint 플러그인은 누락된 의존성을 감지할 수 있습니다.
3. 비동기 작업
   • async 함수는 useEffect 내부에서 직접 사용할 수 없으므로 별도로 선언해야 합니다.

useEffect(() => {
  const fetchData = async () => {
    const result = await fetch("https://api.example.com");
    const data = await result.json();
    console.log(data);
  };
  fetchData();
}, []);

 

useEffect는 컴포넌트 라이프사이클과 관련된 로직을 명확하게 관리할 수 있는 강력한 도구입니다.

 

 

 

 

 

 

#프로그래밍배우기 #react #useEffect #컴포넌트 #라이프사이클 #의존성배열