리액트 공식 문서를 참고한 정리 내용 (25.08 기준)
브라우저가 화면을 다시 그리기 전에 실행되는
useEffect이다.
useLayoutEffect(setup, dependencies?)useLayoutEffect를 호출하여 브라우저가 화면을 다시 그리기 전에 레이아웃을 계산한다.
import { useState, useRef, useLayoutEffect } from 'react';
function Tooltip() {
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height);
}, []);
// ...매개변수
setup(필수)
- Effect의 로직이 포함된 함수로, cleanup 함수를 반환할 수도 있다.
- 컴포넌트가 DOM에 추가되기 전에 React는 setup 함수를 실행한다.
- 컴포넌트가 DOM에서 제거되기 전에 React는 cleanup 함수를 한 번 더 실행한다.
dependencies(선택)
setup안에서 쓰이는 모든 반응형 값들을 배열에 넣음
반환값
useLayoutEffect는 undefined를 반환한다.
주의사항
1. 호출 위치 제한
- Hook이기 때문에 반드시 컴포넌트 최사위나 커스텀 Hook에서만 호출해야 한다.
2. Strict Mode
- React가 setup → cleanup → setup을 한 번 더 실행해서 정리 로직이 제대로 동작하는지 검사하고,
- 문제가 생긴다면 cleanup 함수 구현이 잘못된 것이다
3. 의존성 문제
- 의존성 배열에 객체/함수를 직접 넣으면, 렌더링 때마다 값이 새로 만들어져서 Effect가 불필요하게 다시 실행될 수 있다.
- 이를 해결하기 위해서는 불필요한 의존성 제거, state 업데이트 추출, 로직을 Effect 밖으로 빼기 등이 있다
4. 실행 환경
- 클라이언트에서만 동작하며, 서버 렌더링(SSR) 단계에서는 실행되지 않는다.
5. 성능 주의
useLayoutEffect안의 코드는 브라우저가 화면을 그리기 전에 실행도며,- 이로 인해 오래 걸리면 화면 그리리가 지연되어 어플리케이션이 느려질 수 있다.
- 가능하다면
useEffect를 사용하는게 더 좋다!
6. State 업데이트 주의
useLayoutEffect안에서 state를 바꾸면 React가 즉시 다른 Effect(useEffect등)까지 전부 실행시킨다.
👉
useLayoutEffect는 화면 그리기 전에 실행되므로 꼭 필요한 경우에만 쓰고, cleanup을 잘 구현하며, 의존성과 성능 문제를 주의해야 한다.
--
사용법
브라우저가 화면을 다시 그리기 전에 레이아웃 계산하기
대부분의 컴포넌트는 렌더링을 위해 해당 컴포넌트의 화면상 위치와 크기를 알 필요가 없다.
React에서 컴포넌트가 JSX를 반환하면 브라우저는 해당 컴포넌트의 위치와 크기(레이아웃)를 계산한 뒤 화면을 다시 그린다.
예를 들어, 버튼에 마우스를 올렸을 때 툴팁을 띄우고 싶다고 가정해보자.
이때 브라우저는 화면에 충분한 공간이 있는지 확인하고, 만약 공간이 부족하다면 툴팁을 위·아래·좌우 중 적절한 위치에 표시해야 한다.
- 툴팁을 우선 아무 위치에 렌더링
- 브라우저가 툴팁의 크기를 계산한다. (”이 위치는 공간이 부족하네”)
- 공간이 부족한 경우 다른 위치로 바꿔서 렌더링을 진행한다.
단, 이 과정이 브라우저가 화면을 그린 후에 일어나면, 사용자가 “툴팁이 위 → 아래로 순간 이동하는 것”을 보게 된다. (깜빡임..)
이를 해결하기 위해서는
useLayoutEffect를 사용하여 브라우저가 화면을 다시 그리기 전에 실행되도록 한다.
1차 렌더 → 크기 측정 → 위치 재계산 → 재렌더를 화면이 그려지기 전에 끝내, 결과적으로 사용자는 툴팁이 처음부터 올바른 위치에 있는 것처럼 보게 된다.
👉 툴팁처럼 화면 배치(레이아웃)를 계산해야 하는 UI는, 깜빡임 없이 올바른 위치에 표시하려고 useLayoutEffect에서 미리 레이아웃 계산을 한다.
