<div id="readability-page-1" class="page"><div>
 <div id="SE-6db65b02-aaa5-45dd-a9a1-18efa05f5da1">
 이전 블로그 글에서 useEffect를 배웠습니다. 그런데 거의 똑같이 생긴 형제가 하나 있습니다 — useLayoutEffect입니다. API(의존성 배열, cleanup)는 완전히 같고, 딱 하나, 실행 타이밍만 다릅니다. 그런데 그 타이밍 차이가 전부이고, 면접에서 가장 자주 나오는 비교 중 하나죠.
​
​
핵심은 타이밍 — paint 전이냐, 후냐
Fiber에서 화면 갱신이 렌더 → 커밋 단계로 일어난다고 했죠. 커밋(실제 DOM에 반영) 이후, 브라우저가 화면을 실제로 그리는(paint) 순간을 기준으로 두 훅의 위치가 갈립니다.

 </div> <div id="SE-a0ba645e-d6d6-4af7-b910-39579aee3017">
 렌더 → 커밋(DOM 변경) → [useLayoutEffect] → 브라우저 paint → [useEffect]
 ↑ paint 전, 동기 ↑ paint 후, 비동기
 </div> <div id="SE-bc634a23-514f-40fc-bba5-641bd833e4ba">
 <ul><li>useLayoutEffect — DOM이 바뀐 직후, 브라우저가 화면을 그리기 전에 동기로 실행됩니다. 그래서 여기서 무언가를 측정하고 바꾸면, 사용자는 중간 상태를 보지 못합니다.
</li><li>useEffect — 브라우저가 화면을 다 그린 뒤에 비동기로 실행됩니다. 사용자는 일단 화면을 본 다음, 이펙트가 돕니다.
</li></ul>
 </div> <div id="SE-72b225c3-8528-4f94-83f2-cf88946c8cf6">
 왜 이 차이가 중요한가 — "측정해서 보정"의 함정
 </div> <div id="SE-6c7cf343-e6b2-4646-9c3a-cbaad5ca4ddc">
 ​
핵심 상황은 딱 하나입니다. DOM을 실제로 그려봐야 크기·위치를 알 수 있고, 그 값으로 화면을 다시 맞춰야 하는 경우입니다. 요소의 높이를 재서 위치를 옮기거나, 스크롤 위치를 맞추는 일이 여기 해당하죠. "실제로 그려봐야 안다"가 포인트입니다 — 그리기 전에는 크기를 모르니까요.
​
이걸 useEffect로 하면, 사용자가 보는 화면이 이렇게 흐릅니다.

 </div> <div id="SE-968e5426-be67-42a1-8fc3-1ecff8cfe3bb">
 [1] 보정 전 상태로 그림 → 브라우저 paint → 사용자가 "잘못된 화면"을 봄 (1프레임)
[2] 그 뒤 useEffect 실행 → 측정 → setState → 다시 그림 → paint → "올바른 화면"
결과: 잘못된 화면이 깜빡 보였다가 휙 바뀐다 (flicker)
 </div> <div id="SE-c23cec52-664a-4d50-b416-d6d91595204c">
 useLayoutEffect는 측정과 보정을 [1]의 paint가 일어나기 전에 동기로 끝냅니다. 그래서 "잘못된 화면"이 사용자 눈에 닿기 전에 이미 올바른 값으로 교체됩니다. 깜빡임이 사라지는 거죠.
 </div> <div id="SE-c94aff76-23ae-4698-9e69-5635be678117">
 ​
말보다 코드가 분명합니다. 자기 자신의 너비를 재서 화면에 보여주는 작은 컴포넌트를 두 방식으로 짜보겠습니다.
​
​
🔴 useEffect 버전 — 숫자가 깜빡인다

 </div> <div id="SE-946e82e1-c5ae-407b-9eb9-03edb43a562a">
 import { useRef, useEffect, useState } from 'react';

function WidthLabel() {
 const ref = useRef&lt;HTMLDivElement&gt;(null);
 const [width, setWidth] = useState(0);

 useEffect(() =&gt; {
 setWidth(ref.current!.offsetWidth); // paint '후'에 측정
 }, []);

 return &lt;div ref={ref}&gt;이 박스의 너비: {width}px&lt;/div&gt;;
}
 </div> <div id="SE-a7481cc7-780c-4d59-8f30-bf85d988ceec">
 처음 화면엔 **너비: 0px**이 잠깐 보입니다(첫 paint 때 width가 아직 0이니까요). 그다음 useEffect가 돌아 실제 값으로 바뀌죠. 빠르면 거의 안 보이지만, 느린 기기나 무거운 화면에서는 0px → 248px로 숫자가 튀는 게 눈에 띕니다.
​
​
✅ useLayoutEffect 버전 — 처음부터 올바른 값

 </div> <div id="SE-3df11533-ca54-444d-830f-098d00c2516d">
 import { useRef, useLayoutEffect, useState } from 'react';

function WidthLabel() {
 const ref = useRef&lt;HTMLDivElement&gt;(null);
 const [width, setWidth] = useState(0);

 useLayoutEffect(() =&gt; {
 setWidth(ref.current!.offsetWidth); // paint '전'에 측정→갱신
 }, []);

 return &lt;div ref={ref}&gt;이 박스의 너비: {width}px&lt;/div&gt;;
}
 </div> <div id="SE-90c9b6a4-9fe0-49b4-8205-d197b9426e47">
 코드는 useEffect → useLayoutEffect 한 단어만 바뀌었습니다. 그런데 이번엔 0px이 절대 보이지 않습니다. 측정과 재렌더가 paint 전에 끝나서, 사용자는 처음부터 너비: 248px만 봅니다.
​
<ul><li>정리하면: 측정 결과를 화면에 반영하는데 그 중간 단계(0px)가 보이면 안 될 때 → useLayoutEffect.
</li></ul>
 </div> <div id="SE-7dc25710-4347-4f79-818a-64d63a0cba45">
 ​
조금 더 실무에 가까운 예입니다. 채팅창은 새 메시지가 오면 항상 맨 아래로 스크롤되어야 하죠. 그런데 이 스크롤 조정을 useEffect로 하면, 이전 스크롤 위치가 한 프레임 보였다가 아래로 휙 점프하는 게 보일 수 있습니다.

 </div> <div id="SE-e12c6ff4-dbad-4733-b041-4acb67832af2">
 import { useRef, useLayoutEffect } from 'react';

function ChatLog({ messages }: { messages: string[] }) {
 const listRef = useRef&lt;HTMLUListElement&gt;(null);

 useLayoutEffect(() =&gt; {
 const list = listRef.current!;
 // 새 메시지가 추가되면 paint 전에 맨 아래로 스크롤 → "휙 점프"가 안 보인다
 list.scrollTop = list.scrollHeight;
 }, [messages]); // messages가 바뀔 때마다

 return (
 &lt;ul ref={listRef} style={{ height: 200, overflowY: 'scroll' }}&gt;
 {messages.map((m, i) =&gt; (
 &lt;li key={i}&gt;{m}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
 );
}
 </div> <div id="SE-78ad79c6-e93a-410a-a1fd-862b2afaa608">
 messages가 바뀔 때마다 useLayoutEffect가 paint 전에 scrollTop을 맨 아래로 맞춥니다. 그래서 사용자는 항상 최신 메시지가 보이는 상태로 화면을 받습니다. 이걸 useEffect로 하면 "이전 위치 → 맨 아래"로 미끄러지는 한 프레임이 보일 수 있죠. (스크롤·포커스·크기 측정처럼 "화면에 보이기 전에 끝나야 자연스러운" 작업이 useLayoutEffect의 전형적인 용도입니다.)
 </div> <div id="SE-bfdf11d3-343c-4890-bb48-65b7b2f17bf3">
 기본은 useEffect, useLayoutEffect는 예외
 </div> <div id="SE-b7c89a1b-5275-46d1-83ec-ddcd3d584c05">
 ​
그렇다고 "더 빨리 실행되니 useLayoutEffect가 좋은 거 아냐?"라고 오해하면 안 됩니다. useLayoutEffect는 브라우저의 paint를 막습니다(blocking). 그 안의 작업이 무거우면 화면이 그려지는 게 그만큼 늦어져 앱이 버벅일 수 있죠.
​
그래서 원칙은 이렇습니다.
​
<ul><li>기본은 useEffect. useLayoutEffect는 "DOM을 측정해서 paint 전에 동기로 보정해야 하는" 특수한 경우에만.
</li></ul>​
대부분의 부수효과(데이터 페칭, 구독, 로깅)는 화면이 그려진 뒤에 해도 아무 문제가 없으니 useEffect가 맞습니다. useLayoutEffect는 "깜빡임을 막아야 하는 레이아웃 측정·보정"이라는 좁은 용도로 아껴 씁니다.

 </div> <div id="SE-b136deba-72d0-46fc-8c96-a26911f6febb">
 ​
useLayoutEffect는 서버 렌더링(SSR) 환경에서 실행되지 않습니다. 서버에는 실제 DOM도, 레이아웃도 없으니까요. 그래서 SSR로 렌더하는 컴포넌트에서 useLayoutEffect를 쓰면 콘솔에 경고가 뜹니다.
​
이 시리즈는 클라이언트 전용(Vite) 기준이라 당장 문제는 없지만, Next.js 같은 SSR 프레임워크로 옮길 땐 기억해두세요. 레이아웃 측정이 꼭 필요한 게 아니라면 useEffect를 먼저 고려하는 게 SSR에도 안전합니다.
​
​
면접 포인트 정리
<ul><li>둘의 차이는? API는 같고 타이밍만 다르다. useEffect는 paint 후 비동기, useLayoutEffect는 DOM 변경 후 paint 전 동기.
</li><li>언제 useLayoutEffect? DOM을 측정해서 paint 전에 보정해야 할 때(툴팁 위치, 스크롤 위치 등). 깜빡임을 막는다.
</li><li>기본값은? useEffect. useLayoutEffect는 paint를 막으므로(성능 비용) 꼭 필요할 때만.
</li><li>SSR? useLayoutEffect는 서버에서 실행되지 않아 경고가 난다.
</li></ul>
 </div> <div id="SE-cf44ce99-f979-4fe2-a20e-c909c6678ead">
 ​
<ul><li>useLayoutEffect와 useEffect는 API가 같고 타이밍만 다르다.
</li><li>타이밍: 커밋(DOM 변경) → useLayoutEffect(paint 전, 동기) → 브라우저 paint → useEffect(paint 후, 비동기).
</li><li>useLayoutEffect는 DOM을 측정해 paint 전에 동기로 보정할 때 쓴다(깜빡임 방지: 툴팁·스크롤 위치 등).
</li><li>기본은 useEffect. useLayoutEffect는 paint를 막으니 꼭 필요할 때만 아껴 쓴다.
</li><li>useLayoutEffect는 SSR에서 실행되지 않으니 프레임워크 환경에선 주의한다.
</li></ul>​
다음 챕터에서는 모달·툴팁·드롭다운을 만들 때 빠지지 않는 Portal(createPortal)을 다룹니다. 컴포넌트 트리상으로는 깊은 곳에 있는데, 실제 DOM은 트리 바깥(보통 &lt;body&gt; 끝)에 그려야 할 때 쓰는 도구입니다.

 </div> <div id="SE-d6efb1c2-475a-4e39-9d7a-ea56c3fa2cb4">
 ​
<ul><li>useLayoutEffect — React 공식 문서 (타이밍·SSR 주의; 확인: 2026-06-24)
</li><li>useEffect — React 공식 문서 (확인: 2026-06-24)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

이전 블로그 글에서 useEffect를 배웠습니다. 그런데 거의 똑같이 생긴 형제가 하나 있습니다 — useLayoutEffect입니다. API(의존성 배열, cleanup)는 완전히 같고, 딱 하나, 실행 타이밍만 다릅니다. 그런데 그 타이밍 차이가 전부이고, 면접에서 가장 자주 나오는 비교 중 하나죠. 핵심은 타이밍 — paint 전이냐, 후냐 Fiber에서 화면 갱신이 렌더 → 커밋 단계로 일어난다고 했죠. 커밋(실제 DOM에 반영) 이후, 브라우저가 화면을 실제로 그리는(paint) 순간을 기준으로 두 훅의 위치가 갈립니다. useLayoutEffect — DOM이 바뀐 직후, 브라우저가 화면을 그리기 전에 동기로 실행됩니다. 그래서 여기서 무언가를 측정하고 바꾸면, 사용자는.......

useLayoutEffect vs useEffect — 언제 무엇을 쓰나

댓글