[React] 리액트 useEffect 호출 시점, 제대로 정리해봤다

 

리액트 쓸 때 거의 무조건 쓰게 되는 훅 중 하나가 useEffect다.
처음에는 "컴포넌트 마운트 될 때 실행되는 함수 아니야?" 하고 쉽게 생각할 수 있는데, 막상 실제로 쓰다 보면 언제 호출되는지 헷갈리는 경우가 꽤 많다.

이번 글에서는 useEffect가 정확히 언제 호출되는지, 그리고 디펜던시 배열에 따라 어떻게 달라지는지 정리해봤다.

 

 

---

 

✅ useEffect 기본 구조

useEffect(() => {
  // 실행할 코드
}, [/* 의존성 배열 */]);

 

의존성 배열(dependency array)에 뭐가 들어가느냐에 따라서 실행 타이밍이 달라진다. 아래에서 하나씩 살펴볼게.

 

 

728x90

 

 

---

 

1️⃣ 의존성 배열이 없는 경우

useEffect(() => {
  console.log('렌더링 이후마다 실행됨');
});

 

- 이 경우는 컴포넌트가 렌더링될 때마다 실행된다.
- 마운트 시점뿐 아니라, 상태 업데이트 등으로 리렌더링될 때도 계속 실행된다.
주의: `렌더링 전에 실행되는 게 아니라**, 화면이 실제로 브라우저에 그려진 뒤에 실행된다. 이건 매우 중요하다.

 

 

---

 

2️⃣ 빈 배열일 경우

useEffect(() => {
  console.log('마운트될 때 딱 한 번 실행됨');
}, []);

 

- 의존성 배열이 비어 있으면 마운트될 때 딱 한 번만 실행된다.
- 이후에는 아무리 상태가 바뀌고 리렌더링돼도 다시 실행되지 않음.
이거 덕분에 componentDidMount와 비슷하게 사용할 수 있다. 빈 배열일 경우 ([])

 

 

 

---

 

3️⃣ 의존성이 있을 경우 ([count])

useEffect(() => {
  console.log('count가 바뀔 때마다 실행됨');
}, [count]);

 

- 이 경우는 count라는 값이 변경될 때마다 실행된다.
- 마운트 시에도 한 번 실행되고, 그 이후 count가 바뀔 때마다 다시 실행됨.

 

 

---

 

 

✅ 그럼, 정확한 호출 시점은 언제일까?
리액트 공식 문서 기준으로 보면 useEffect는 DOM 업데이트 이후, 즉 렌더링이 끝난 직후 호출된다.
좀 더 구체적으로 말하면:
- 컴포넌트가 렌더링됨
- 브라우저에 실제로 DOM이 반영됨
- 그 후에 useEffect가 호출됨
즉, 비동기적으로 호출된다고 보면 된다. 이 점이 useLayoutEffect와 큰 차이점이기도 하다.