useEffect가 호출되는 시점

useEffect는 **React 함수형 컴포넌트에서 부수 효과(side effect)**를 수행하기 위한 훅입니다.
예를 들어, 데이터 요청, DOM 조작, 이벤트 등록/해제 등의 작업을 할 때 사용합니다.
이 훅이 **언제 호출되는지(즉, 실행 시점)**은 의존성 배열([])에 따라 달라집니다.

 

- 기본 개념

useEffect의 기본 형태는 다음과 같습니다:

useEffect(() => {
  // 실행할 코드 (effect)
  return () => {
    // 정리(clean-up) 함수 (optional)
  };
}, [deps]);

 

여기서 deps는 **의존성 배열(dependency array)**로,
이 배열의 값이 변경될 때마다 effect가 다시 실행됩니다.

 

- 호출 시점 정리

의존성 배열	호출 시점	예시
없음	컴포넌트가 렌더링될 때마다 실행	useEffect(() => {...});
빈 배열([])	최초 렌더링 후 한 번만 실행 (mount 시점)	useEffect(() => {...}, []);
특정 값 포함([state, props])	해당 값이 변경될 때마다 실행	useEffect(() => {...}, [count]);

- 실행 순서 (렌더링과의 관계)

1. 컴포넌트가 렌더링됨 (화면에 그려짐)
2. 화면이 실제로 업데이트된 뒤, useEffect 콜백 실행
   → 즉, 렌더링 직후(화면이 바뀐 뒤) 실행됨.
3. 다음 렌더링 전에 이전 effect의 clean-up 함수가 먼저 호출됨
   → 주로 이벤트 리스너 해제, 타이머 정리 등에 사용

예시

useEffect(() => {
  console.log("렌더링 후 실행됨");

  return () => {
    console.log("다음 렌더링 전 정리됨");
  };
});


렌더링이 여러 번 일어날 경우 콘솔 순서:

렌더링 후 실행됨
다음 렌더링 전 정리됨
렌더링 후 실행됨
...

 

🚫 주의할 점

• 렌더링 전에 실행되지 않는다.
  (즉, 화면이 바뀐 후에 실행됨)
• 서버 사이드 렌더링(SSR) 환경에서는 실행되지 않는다.
  (브라우저 환경에서만 동작)
• 비동기 함수 directly 사용 불가

// ❌ 이렇게 하면 안 됨
useEffect(async () => { ... });

// ✅ 이렇게 해야 함
useEffect(() => {
  const fetchData = async () => { ... };
  fetchData();
}, []);

 

정리 (Clean-up 함수)

Clean-up 함수는 다음 시점에 호출됩니다:

• 컴포넌트가 언마운트될 때
• 또는 다음 effect 실행 직전

예시:

 

useEffect(() => {
  const id = setInterval(() => console.log("interval"), 1000);

  return () => clearInterval(id); // 언마운트 또는 deps 변경 시 정리
}, []);

 

요약

상황	실행 시점
useEffect(() => {})	매 렌더링 이후
useEffect(() => {}, [])	마운트 이후 한 번
useEffect(() => {}, [a, b])	a 또는 b가 변경된 후
return () => {...}	언마운트 직전 또는 다음 실행 전