1️⃣ 렌더링 발생
2️⃣ useLayoutEffect 실행
3️⃣ DOM 업데이트 및 페인팅
4️⃣ useEffect 실행
비교
| 구분 | useEffect | useLayoutEffect |
|---|---|---|
| 실행 시점 | 화면이 그려진 후 (paint 후) | 화면이 그려지기 직전 (paint 전) |
| 동기 / 비동기 | 비동기 | 동기 |
| 렌더링 | 지연 없음 | 잠깐 멈춤 |
| 사용 예시 | 데이터 fetch, 이벤트 리스너 등록 등 UI와 무관한 작업 | DOM의 위치/크기 측정, 스크롤 조정 등 레이아웃 관련 작업 |
상황
- element의 높이를 계산하여 스타일을 적용할 때
scrollTo나 캐러셀의 초기 위치를 조정할 때
주의
useLayoutEffect는 렌더링을 블로킹하기 때문에 깜빡임 방지용으로는 좋지만 성능 저하가 생길 수 있다
