useEffect

React에서 상태(state) 변화에 따른 부가 작업(Effects)을 수행하기 위해 사용하는 Hook입니다.

사용법

useEffect는 두 개의 인자를 받습니다. 첫 번째 인자는 부가 작업(Effect)을 수행하는 함수이고, 두 번째 인자는 의존성(Dependency) 배열입니다.

의존성 배열

의존성 배열은 useEffect가 수행되는 조건을 결정합니다. 의존성 배열이 비어있다면, useEffect는 컴포넌트가 렌더링될 때마다 실행됩니다. 만약 의존성 배열에 값이 있다면, 해당 값이 변경될 때마다 useEffect가 실행됩니다.

useEffect(() => {
  // 부가 작업 수행
}, [dependency1, dependency2]);

사용 예시

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

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

위의 예시 코드에서는 count 상태가 변경될 때마다 document.title을 업데이트합니다.