[React] 11. useLayoutEffect (ft. Time is running out)

useLayoutEffect 란 ?

• 브라우저가 화면을 그리기 전에 마지막으로 작업 할 수 있게 해주는 훅
• useEffect 보다 먼저 실행됨
  (단, 브라우저가 화면 그리기 전에 동작하는 동기적 실행이므로 성능에 영향을 줌)

useLayoutEffect 렌더링 순서

1. 렌더링 시작
2. dom 생성
3. useLayoutEffect
4. 브라우저 화면 그리기 시작
5. useEffect

useLayoutEffect vs useEffect (Time is running out)

• useEffect 의 경우 브라우저가 화면을 그린 이후에 동작 > 유저 입장에서 화면 깜빡이는게 보임
• useLayoutEffect 의 경우 브라우저가 화면을 그리기 전 동작 > 유저 입장에서 자연스러움
• 즉 마지막으로 화면이 그려지기 직전 화면과 관련해서 수정 할 기회를 주는 것

그럼 왜 useEffect 씀 ?

• 화면이 그려지기도 전에 동작함 (즉, 너무 빨리 동작하고 제어도 안 됨)
• 화면이 그려지기도 전에 우선 동작하기 때문에 코드가 길어지면 길어질수록 성능에 영향을 많이 끼침

예시 코드

// useEffect 시 
useEffect(() => {
  const height = ref.current?.offsetHeight;
  if (height > 300) {
    setShowWarning(true);
  }
}, []);

// useLayoutEffect 시 
useLayoutEffect(() => {
  const height = ref.current?.offsetHeight;
  if (height > 300) {
    setShowWarning(true);
  }
}, []);

렌더링 순서를 고려했을 때 만약 위처럼 useEffect 를 사용하면 화면이 다 그려지고 화면이 깜빡 하면서 위치가 조정됨 (사용자 입장에서 불편 )

실제 사용 ?

• 모달창 위치 조정
• 스크롤 고정해제 등등 이름대로 레이아웃 위주임