useEffect

useEffect는 리액트 훅 중 하나로, 컴포넌트의 부수 효과를 처리하기 위해 사용됩니다. 컴포넌트가 렌더링 되거나 업데이트될 때, 그리고 컴포넌트가 언마운트될 때 특정 작업을 수행할 수 있도록 도와줍니다.

---

왜 useEffect를 사용하는가?

React는 컴포넌트의 렌더링과 상태 관리를 중심으로 설계되었지만, 다음과 같은 부수 효과를 처리해야 하는 경우가 있습니다.

1. 데이터 가져오기(API 호출)
   • 컴포넌트가 마운트되었을 때 서버에서 데이터를 가져오는 작업
2. 브라우저 API 사용
   • document.title 변경, 이벤트 리스너 등록/해제 등
3. 타이머 및 구독 관리
   • setInterval 또는 WebSocket 연결 관리
4. 컴포넌트 언마운트 처리
   • 리소스 정리 작업

---

useEffect의 사용 방법

1. 기본 구조

useEffect는 두 개의 인자를 받습니다.

• 첫 번째 인자 : 실행할 함수
• 두 번째 인자 : 의존성 배열

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

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

  useEffect(() => {
    console.log(`Count has been updated to ${count}`);
  }, [count]);

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

 

위 코드에서 useEffect는 count가 변경될 때마다 실행됩니다.

2. 의존성 배열

• 빈 배열 ([])
  • 컴포넌트가 처음 마운트될 때 한번만 실행됩니다.

useEffect(() => {
  console.log('Component mounted!');
}, []);

• 특정 값 ([deps])
  • 의존성 배열에 있는 값이 변경될 때만 실행됩니다.

useEffect(() => {
  console.log(`Count changed to ${count}`);
}, [count]);

• 의존성 배열 생략
  • 의존성 배열에 있는 값이 변경될 때만 실행됩니다.

useEffect(() => {
  console.log('This runs on every render');
});

 

3. cleanup 함수

useEffect 내부에서 정리가 필요한 작업이 있을 경우, 반환값으로 정리 함수를 정의합니다. 정리 함수는 컴포넌트가 언마운트 되거나 의존성 값이 변경될 때 호출됩니다.