tooltip 위치를 계산한다고 하자.

처음에는 자연스럽게 이렇게 구현했다.

useEffect(() => {
  const rect = ref.current?.getBoundingClientRect();

  setPosition({
    top: rect?.top ?? 0,
    left: rect?.left ?? 0,
  });
}, []);

근데 실제로 보면:

tooltip이 잠깐 이상한 위치에 나타났다가
다음 프레임에서 다시 이동하는 현상

이 생겼다. CSS 문제인 줄 알았다.

근데 실제 원인은 useEffect 실행 타이밍이었다.

이 시점부터

useEffect
useLayoutEffect

차이를 진짜 체감하기 시작했다.

useLayoutEffect란

useLayoutEffect는 DOM이 업데이트된 직후,
브라우저가 paint하기 전에 동기적으로 실행되는 Hook이다.

React 공식 설명보다 중요한 건

사용자가 화면을 보기 전에 실행된다

는 점이다.

useEffect와 가장 큰 차이

핵심 차이는 실행 타이밍이다.

useEffect

render
→ DOM update
→ paint
→ useEffect 실행

즉 사용자가 이미 화면을 본 뒤 실행된다.

useLayoutEffect

render
→ DOM update
→ useLayoutEffect 실행
→ paint

즉 브라우저가 화면을 그리기 전에 실행된다.

이 차이가 굉장히 중요하다.

왜 이게 중요한가

useEffect 사용 시

흐름:

1. 잘못된 위치로 렌더
2. 브라우저 paint
3. useEffect 실행
4. 위치 계산
5. 다시 렌더링
6. 위치 수정

즉 사용자는 tooltip이 한 번 튀는 걸 본다.

useLayoutEffect 사용 시

흐름:

1. DOM 업데이트
2. useLayoutEffect 실행
3. 위치 계산
4. 바로 DOM 수정
5. paint

즉 사용자는 수정된 최종 결과만 본다.

이 차이가 핵심이다.

useLayoutEffect는 왜 성능 문제가 생길까

여기서 중요한 포인트.

useLayoutEffect는

paint 전에 동기 실행

된다.

즉 브라우저 입장에서는

"이 작업 끝날 때까지 화면 못 그림"

상태다.

흐름

render
→ DOM update
→ useLayoutEffect 실행
→ (브라우저 대기)
→ paint

즉 useLayoutEffect 안에서 무거운 작업을 하면

화면 표시 자체가 늦어진다.

그래서 대부분은 useEffect면 충분하다

이게 굉장히 중요하다.

처음 useLayoutEffect를 배우면

"더 빨리 실행되니까 좋은 거 아닌가?"

라고 생각하기 쉽다.

근데 React 팀도 기본적으로

가능하면 useEffect 사용

방향이다.

왜냐하면

useEffect는 paint 이후 실행
즉 브라우저가 먼저 화면을 보여줄 수 있다.

즉 렌더링 blocking이 적다.

useLayoutEffect가 필요한 진짜 경우

실제로는 꽤 제한적이다.

보통

DOM 측정
레이아웃 보정
paint 전에 반드시 수정해야 하는 UI

에서만 사용한다.

예:

tooltip 위치
dropdown 위치
modal positioning
textarea auto resize
animation initial sync
scroll position restore

SSR 환경에서는 왜 경고가 날까

useLayoutEffect does nothing on the server

경고를 볼 수 있다.

이유는 단순하다.

서버에는

DOM 없음
paint 없음

즉

“paint 전에 실행”
개념 자체가 없다.

그래서 Next.js에서는 보통:

Client Component 안에서만 사용한다.