useLayoutEffect

1. useLayoutEffect란?

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

2. 언제 사용할까?

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

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

3. 그래도 useEffect

[공식문서 - useLayoutEffect 팁]

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

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

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

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