layouteffect

useEffect와 useLayoutEffect의 차이를 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

대부분 useEffect를 먼저 쓰는 이유는 무엇인가요?

부가 설명

useLayoutEffect(() => {
  const rect = ref.current.getBoundingClientRect();
  setTooltipPosition(rect);
}, []);

tooltip 위치처럼 DOM 크기를 재고 paint 전에 위치를 보정해야 하는 경우에는 useLayoutEffect가 필요할 수 있습니다.

useEffect(() => {
  document.title = title;
}, [title]);

화면 paint를 막을 필요가 없는 작업은 보통 useEffect가 적절합니다.

useLayoutEffect는 이름 때문에 layout 작업 전용 hook처럼 보이지만, 핵심은 paint 전 동기 실행입니다. 이 동기 실행 때문에 사용자가 중간 화면을 보지 않게 만들 수 있지만, 그만큼 browser가 화면을 그리는 시점을 늦출 수 있습니다.

SSR 환경에서는 useLayoutEffect가 server에서 실행되지 않는다는 점도 고려해야 합니다.

한 줄 정리

useEffect는 paint 이후 side effect에, useLayoutEffect는 paint 전에 DOM 측정과 보정이 꼭 필요할 때 사용합니다.