[React] useLayoutEffect

Byeonghyeon·2025년 1월 13일

React

공부

목록 보기

6/21

useLayoutEffect

useLayoutEffect는 useEffect와 유사한 Hook으로 React 공식 문서에는 이렇게 설명하고 있다.

useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행되는 useEffect입니다.

useEffect vs useLayoutEffect

useEffect

useEffect는 컴포넌트들이 render와 paint 된 후에 실행된다.

비동기적으로 DOM이 그려지고 난 후에 상태값에 따라 다시 렌더링된다. useEffect 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자는 화면의 깜빡임을 보게 된다.

useLayoutEffect

useLayoutEffect는 DOM이 그려지기 이전 시점에 동기적으로 수행된다.

컴포넌트들이 render 된 후 실행되며, 그 이후에 paint된다.

내부에 DOM을 조작하는 코드가 존재하더라도 사용자는 화면의 깜빡임을 경험하지 않는다.

동기적으로 작동되므로 성능에 영향을 준다. 즉, 필요할 때만 사용해야 한다.

매개변수

useLayoutEffect(setup, dependencies?)

setup : Effect의 로직이 포함된 함수이다. 컴포넌트가 DOM에 추가되기 전에 React는 setup 함수를 실행한다. dependencies가 변경되어 다시 렌더링 될 때마다, React는 먼저 이전 값으로 cleanup 함수를 실행한 다음, 새로운 값으로 setup 함수를 실행한다.
optional dependencies : setup 코드 내에서 참조된 모든 반응형 값의 목록이다. 의존성을 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행된다.

반환값

useLayoutEffect는 undefined를 반환한다.

사용법

useEffect(() => {
	// do something
    return () => / * clean up */
}, [dependencies]);

useLayoutEffect(() => {
	// do something
    return () => / * clean up */
}, [dependencies]);

useEffect와 사용법이 100% 동일하다.