useEffect는 컴포넌트의 마운트, 업데이트, 언마운트 시점에 호출됩니다
- 마운트: 컴포넌트가 처음 렌더링된 후 실행. 초기화, API 호출, 구독 설정 등에 사용.
- 업데이트: 의존성 배열에 지정된 값이 변경될 때마다 클린업 함수가 먼저 실행된 후, 콜백 함수가 실행.
- 언마운트: 컴포넌트가 DOM에서 제거될 때 클린업 함수가 실행되어 이벤트 리스너 제거, 타이머 해제 등 정리.
의존성 배열이 비어 있으면 마운트/언마운트 시 한 번씩만 실행되고, 배열을 생략하면 매 렌더링마다 실행됩니다.
호출 시점
useEffect는 컴포넌트의 생명주기와 렌더링에 따라 다음과 같은 시점에 실행됩니다.
마운트 (Mount)
컴포넌트가 DOM에 추가된 직후, 첫 렌더링 후 실행.
예: API 호출, 초기 데이터 로드.
useEffect(() => {
console.log('마운트됨');
fetchData();
}, []); // 빈 배열: 마운트 시 한 번업데이트 (Update)
의존성 배열의 값이 변경될 때마다 실행.
순서: 이전 클린업 함수 → 새로운 콜백 함수.
예: 상태 변경에 따라 이벤트 리스너 갱신.
useEffect(() => {
console.log(`Count: ${count}`);
return () => console.log('클린업');
}, [count]); // count 변경 시 실행언마운트 (Unmount)
컴포넌트가 DOM에서 제거될 때 클린업 함수 실행.
예: 이벤트 리스너 제거, 타이머 해제.
useEffect(() => {
const timer = setInterval(() => console.log('Tick'), 1000);
return () => clearInterval(timer);
}, []);의존성 배열의 역할
-
빈 배열 ([])
마운트 시 한 번, 언마운트 시 클린업 한 번. -
값 포함 ([dep1, dep2])
dep1, dep2 변경 시마다 클린업 후 콜백 실행. -
생략
매 렌더링마다 클린업 후 콜백 실행. 성능 문제 주의.
useEffect(() => {
console.log('매 렌더링마다 실행');
}); // 의존성 배열 없음클린업 함수의 중요성
클린업 함수는 메모리 누수를 방지하고, 이전 부수효과를 정리.
예: 이벤트 리스너, 구독, 타이머 제거.
useEffect(() => {
const handleClick = () => console.log('Clicked');
window.addEventListener('click', handleClick);
return () => window.removeEventListener('click', handleClick);
}, []);주의점
1. 의존성 배열 완전성
모든 외부 변수 포함(ESLint react-hooks/exhaustive-deps로 점검).
2. 비동기 처리
useEffect 내에서 직접 async 함수 사용 불가. 별도 함수로 분리.
useEffect(() => {
async function fetch() {
const data = await fetchData();
setData(data);
}
fetch();
}, []);과도한 실행 방지
불필요한 렌더링 방지를 위해 의존성 배열 최적화.
결론
useEffect는 컴포넌트의 마운트, 업데이트, 언마운트 시점에 부수효과를 관리하며, 의존성 배열로 실행 시점을 제어한다. 클린업 함수를 통해 메모리 누수를 방지하고, 프론트엔드에서 API 호출, 이벤트 관리, 상태 동기화 등 다양한 작업을 효율적으로 처리한다. 올바른 의존성 관리와 클린업으로 성능과 안정성을 높여야 한다.
