> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/hook/uselayouteffect.md).

# useLayoutEffect

## 1. useLayoutEffect란? 

useEffect와 동일하게 작동 되지만 아래 훅 진행 흐름 이미지를 참고해서 보면 useEffect보다 먼저 실행되는 훅이다. 즉, useLayoutEffect → useEffect 순으로 실행된다. 

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MWNTjBOHgVyaQaZR0XC%2F-MWNV6rByUHUKRDht_-o%2Fimage.png?alt=media\&token=27d5c844-e44e-4bbb-8590-e06352a6fb11)

## 2. 언제 사용할까? 

useEffect보다 먼저 실행되는 훅이기 때문에 반응 속도가 useEffect보다 빠르다. 그래서 UI 변화를 감지해서 실시간 변경할 때 사용한다. 

예를 들어 실시간으로 빠르게 상태가 변해야하는 채팅창의 경우 useLayoutEffect를 사용하는 것이 적절하다. 또는 빠르게 비동기로 받아온 데이터를 렌더링 해야하는 경우 사용하면 좋다.  

## 3. 그래도 useEffect

{% hint style="info" %}
\[[공식문서 - useLayoutEffect 팁](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)]

당신은 클래스 구성 요소의 코드, 노트 마이그레이션하는 경우 `useLayoutEffect`와 동일한 단계에서 화재 `componentDidMount`와 `componentDidUpdate`. 그러나 **먼저** 문제가 발생하는 경우 에만 시도하는 **것이 좋습니다`useEffect`**`useLayoutEffect` .
{% endhint %}

공식문서에 useEffect를 먼저 사용하고 문제가 발생하는 경우에 useLayoutEffect를 사용하라고 나와 있다. 즉, 잘 모르겠으면 useEffect를 사용하자. 

## 4. useEffect와 비교 (반응 속도) 

{% embed url="<https://stackblitz.com/edit/react-rspmpd>" %}

useEffect()가 먼저 작성되어 있지만 console 창을 보면 useLayoutEffect가 먼저 실행된 것을 확인 할 수 있다.&#x20;