[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect

 useLayoutEffect는 useEffect와 달리 렌더링이 되기 전 실행되어 그 결과를 렌더링에 반영한다. 또한 useLayout Effect의 콜백함수는 모두 동기적으로 실행된다는 것이 차이점이다.

[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect

 

[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect

 

1. useLayoutEffect는 무엇인가?

2. 언제 사용하는가

추천글

 

1. useLayoutEffect는 무엇인가?

 useLayoutEffect는 useEffect와 유사한 역할을 하는 react 훅이다.

공통점

• 의존성 배열: 콜백 함수와 의존성 배열을 이용해 특정 상태가 변경될 때 수행할 작업을 지정할 수 있다.

차이점

• 렌더링 차단 여부: useLayoutEffect는 모든 작업이 끝날 때까지 렌더링이 일어나지 않는다. 따라서 실행시간이 길면 렌더링도 지연된다.
• 실행시점: useLayoutEffect는 렌더링 전에 실행된다. useEffect는 렌더링 이후에 실행된다.

2. 언제 사용하는가

import React, { useState, useEffect, useLayoutEffect, useRef } from "react";

function App() {
  const contentRef = useRef(null);
  const [tooltipLeft, setTooltipLeft] = useState(0);

  useLayoutEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  useEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  return (
    <div>
      <span ref={contentRef}>안녕하세요</span>
      <div style={{ position: "absolute", top: 0, left: tooltipLeft }}>
        설명입니다.
      </div>
    </div>
  );
}

export default App;

 돔의 레이아웃에 맞추어 작업을 해야할 때 사용한다. 예를 들어, 특정 요소에 대해 툴팁을 만든다고 가정해보자. 이때 해당 요소에 들어갈 텍스트가 상황에 딸 다르다면, 그때마다 요소의 크기를 측정해 툴팁의 x, y 좌표를 지정해야 한다. 이러한 경웨 useLayoutEffect를 사용한다면 요소를 렌더링 하기 전 요소의 크기를 측정하고 툴팀의 레이아웃을 지정할 수 있게 된다.
 다만 작업을 모두 동기적으로 실행하고 그동안 렌더링도 지연된다는 점에서 무분별하게 사용한다면 프로젝트의 성능이 떨어질 수 있다.

추천글

React 공식문서 - useLayoutEffect