이소모픽 레이아웃 이펙트라는건 없다

리액트의 라이프사이클을 시간순으로 보면:

1. 렌더 함수 실행 → 가상 DOM 생성
2. 실제 DOM 커밋
3. useLayoutEffect 실행 (동기)
4. 브라우저 페인트
5. useEffect 실행 (비동기)

사용자에게 "잘못된 위치의 툴팁"이 한 프레임이라도 보이면 안 되는 경우 useLayoutEffect 가 필요하다.

서버에는 DOM 도 페인트도 없으므로 레이아웃 이펙트는 실행되지 않는다. 그러면 "초기 HTML"과 "하이드레이션 후 의도한 UI" 사이 불일치가 생긴다 — 사용자가 잠깐 잘못된 위치의 툴팁을 본다는 뜻. 리액트의 경고는 "이 컴포넌트는 클라이언트 전용으로 두는 걸 고려하라"는 신호.

import { useEffect, useLayoutEffect } from 'react';
const isClient = typeof document !== 'undefined';
export default isClient ? useLayoutEffect : useEffect;

서버 분기에서 useEffect 를 쓰지만 서버는 어차피 이펙트를 실행하지 않으므로 사실상 noop 의 별칭이다. 효과는 단지 "경고를 안 띄움".

핵심은 "내 이펙트는 첫 페인트의 정확성에 영향을 주는가" 한 줄.

react-redux 가 자기 사용 사례에서 "경고 끄기"용으로 만든 코드를 다른 라이브러리들이 그대로 복사 → Medium 글에 정리되어 검색 1순위 → 더 많은 사람이 또 복사. 이렇게 임의 결정이 사실상 표준이 된 사례다. 라이브러리 코드를 읽을 때도 "왜 이렇게 했는가"의 맥락이 더 중요하다는 교훈.

[감점 답변] "하나는 동기, 하나는 비동기". [좋은 답변] (1) 시점: useLayoutEffect 는 DOM 커밋 직후·페인트 전 동기, useEffect 는 페인트 후 비동기. (2) 용도: 측정/수정해야 깜빡임 없는 경우 → useLayoutEffect, 그 외 → useEffect. (3) SSR: useLayoutEffect 는 서버에서 실행 안 됨 → 클라이언트 전용으로 두거나 동적 import 로 분리. useEffect 도 서버에서 실행 안 되지만 첫 페인트 정확성에 영향 적음.

[감점 답변] "서버에서도 useLayoutEffect 처럼 동작한다". [좋은 답변] 서버에서도 클라이언트에서도 거동을 같게 만드는 게 아니다. 단지 서버 분기에서 useEffect 를 쓰는 모양만 바꿔 리액트의 경고를 우회하는 것. 서버는 어떤 이펙트도 실행 안 한다. 따라서 "레이아웃을 수정해야 하는 컴포넌트" 라면 클라이언트 전용으로 두는 게 더 정직하다.

[감점 답변] "useEffect 로 바꾼다". [좋은 답변] (1) 읽기만 하는 이펙트(DOM 측정·내부 트리 동기화)면 그대로 두고 경고만 무시 가능. (2) 레이아웃을 setState 하는 이펙트면 "use client" 컴포넌트로 분리하거나 dynamic(() => import('X'), { ssr: false }). (3) 깜빡임이 허용되면 useEffect 로 다운그레이드 가능 — 단, 첫 페인트 위치가 잘못 보이는 트레이드오프 인지.