useEffect와 useLayoutEffect는 언제 구분해 사용하나요?

이렇게 답해 보세요 (핵심 답변)

두 Hook 모두 DOM 커밋 이후에 실행되지만, useLayoutEffect는 브라우저가 화면을 실제로 페인트하기 전에 동기적으로 실행된다는 점이 다릅니다. 따라서 툴팁 위치 계산이나 스크롤 보정처럼 DOM 크기를 측정해 즉시 스타일을 조정하지 않으면 화면 깜빡임이 보이는 경우에 useLayoutEffect를 사용합니다. 그 외의 데이터 요청이나 이벤트 구독처럼 화면 그리기를 막을 필요가 없는 일반적인 동기화에는 메인 스레드 블로킹을 줄이기 위해 useEffect를 기본으로 사용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 페인트 전에 DOM 측정과 재렌더를 끝내면 사용자가 중간 레이아웃이 깨진 프레임을 보지 않게 할 수 있습니다.
2. useLayoutEffect 내부 작업이 길어지면 브라우저의 화면 표시 자체가 지연되므로 꼭 필요한 레이아웃 조정에만 제한적으로 써야 합니다.

면접에서 자주 하는 실수

서버 렌더링(SSR) 환경에서는 브라우저 레이아웃 계산이 없고 두 Effect 모두 서버에서 실행되지 않는다는 점을 놓치면 초기 화면 불일치가 생길 수 있습니다.