핵심 답변
의존성 배열은 useEffect가 언제 실행될지를 결정합니다.
의존성 배열 없음: 매 렌더링마다 실행 (거의 사용 안 함)
[] (빈 배열): 마운트 시 1회만 실행[value]: value가 변경될 때마다 실행클린업 함수: 다음 실행 전 또는 언마운트 시 실행됨
예시 코드
typescript
// 마운트 시 1회 실행 (데이터 초기 로드)
useEffect(() => {
fetchData();
}, []);
// userId가 바뀐 때마다 실행
useEffect(() => {
fetchUser(userId);
}, [userId]);
// 클린업 함수: 다음 실행 전 또는 언마운트 시 실행
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer); // 클린업
}, []);핵심 용어
📌 클린업 함수(Cleanup Function)useEffect에서 반환하는 함수로, 다음 effect 실행 전이나 컴포넌트 언마운트 시 실행됩니다. 이벤트 리스너 제거, 타이머 정리 등에 사용합니다.
📌 마운트(Mount)컴포넌트가 처음 DOM에 추가되는 시점입니다. 언마운트(Unmount)는 컴포넌트가 DOM에서 제거되는 시점입니다.