노트

useEffect와 useLayoutEffect

useEffect vs useLayoutEffect

프런트엔드#react#browser · 연결된 개념 10개

쉽게 말하면

useLayoutEffect는 연극에서 막이 오르기 전에 소품 위치를 맞추는 일이에요. useEffect는 막이 오른 뒤에 움직이니 관객이 잠깐 어긋난 장면을 볼 수 있지만, useLayoutEffect는 그런 깜빡임이 없죠.

비유가 깨지는 곳 준비가 끝날 때까지 막을 안 올리니 길어지면 관객이 그만큼 기다려요. 페인트를 동기로 막아 느려질 수 있으니 기본은 useEffect로 둬요. DOM을 재서 위치를 잡을 때처럼 중간 상태가 보이면 안 될 때만 써요.

useLayoutEffect는 useEffect와 같은 일을 하지만, 브라우저가 화면을 그리기(Paint) 전에 동기적으로 실행된다. useEffect는 그린 뒤에 실행된다.

렌더 → DOM 변경 → useLayoutEffect(동기, 끝날 때까지 paint 막음) → paint → useEffect
useEffectuseLayoutEffect
실행 시점paint 후DOM(Document Object Model) 변경 직후, paint 전
방식화면을 막지 않음끝날 때까지 화면을 막음
사용자가 보는 것중간 상태가 한 프레임 보일 수 있음깜빡임 없음
  • 기본은 useEffect다. 데이터 요청, 구독, 로깅, 타이머는 모두 여기에 둔다
  • useLayoutEffect는 "사용자가 중간 상태를 보면 안 될 때"만 쓴다
  • 동기로 막는 만큼 남발하면 렌더가 느려진다. 측정과 쓰기를 섞으면 레이아웃 스래싱도 생긴다
  • 서버에는 레이아웃이 없어서 SSR(Server-Side Rendering)에서는 실행되지 않는다(React 18까지는 경고도 났다). 서버 HTML과 측정 후 화면이 달라 위치가 튈 수 있으니 클라이언트 전용 UI에만 쓴다('use client'와 클라이언트 경계)
  • 프레임 단위 작업은 requestAnimationFrame과 같이 보면 좋다. 브라우저 쪽 그리기 순서는 브라우저 렌더링 파이프라인

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • useEffectEvent

    useEffectEvent는 Effect 안에서 부르되 의존성 배열(Dependency Array)에는 넣지 않는 이벤트 함수를 만드는 훅이다. 항상 최신 props·state를 읽지만, 그 값이 바뀐다고 Effect가 다시 실행되지는 않는다. React 19.2에서 정식이 됐다(2026 기준).

  • Effect가 필요 없는 경우

    Effect는 외부 시스템과 동기화할 때 쓰는 탈출구(Escape Hatch)다. 렌더 중에 계산할 수 있는 값이나 사용자 이벤트 처리에 Effect를 쓰면 렌더가 한 번 더 일어나고 흐름이 꼬인다. React 공식 문서가 이런 경우를 따로 정리해 두었다.

  • 서버 렌더에서 훅이 하는 일

    서버 렌더(Server-Side Rendering, SSR)에서도 컴포넌트 함수는 실제로 호출되고, 그 안의 훅도 호출은 된다. 다만 서버에는 커밋(DOM 반영)이 없어서, 렌더 중 동기적으로 값을 계산하는 훅만 일하고 커밋 뒤에 도는 훅은 아무것도 하지 않는다. "이 훅은 클라이언트에서만 동작한다"는 말은 대개 "Effect 안의 일은 클라이언트에서만 일어난다"는 뜻이다.

  • useTransition

    useTransition은 특정 상태 업데이트를 "급하지 않음(transition)"으로 표시해, 그 렌더 중에도 입력 같은 긴급한 업데이트가 먼저 처리되게 하는 훅이다. [isPending, startTransition]을 반환한다.

  • loading 경계와 레이아웃 끌어올리기

    Next.js App Router에서 loading.tsx는 같은 세그먼트의 page와 그 아래(하위 layout 포함)를 suspense로 감싸지만, **같은 세그먼트의 layout은 감싸지 않는다**. 그래서 데이터를 기다릴 필요가 없는 공통 UI(탭바, 필터 헤더)를 page에서 layout으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.

보기 옵션