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을 업데이트합니다.