useLayoutEffect는 앞서 살펴본 useEffect와 거의 비슷한 기능을 하는 Hook입니다. 이번 챕터에서는 두 가지 Hook을 어떻게 구분해서 써야 하는지를 위주로 살펴보겠습니다.
useLayoutEffect는 React 컴포넌트가 렌더(Render) 과정을 거친 뒤, **동기적(synchronous)**으로 실행됩니다. 컴포넌트가 브라우저에 페인트(Paint) 되기 전에 실행되기 때문에 DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용하는 것이 적합합니다. useLayoutEffect를 적절하게 사용하면 사용자 편의를 개선할 수 있습니다.
일반적으로 state가 조건에 따라 첫 페인트 과정에서부터 보여져야 할 때 useLayoutEffect를 사용하면 원하는 결과를 얻을 수 있습니다. 이 경우 비슷한 동작을 하는 useEffect를 사용하게 되면 첫 페인팅에서 state가 원하는 값이 아닌 초깃값으로 렌더링 되고, 리렌더링 되면서 화면이 깜빡거리는 현상이 발생할 수 있습니다.
이러한 깜빡거리는 현상을 방지하고자 할 때 useLayoutEffect를 사용합니다. useEffect와 useLayoutEffect의 차이점은 10.3에서 자세히 살펴보겠습니다.
<aside>
<img src="/icons/forward_gray.svg" alt="/icons/forward_gray.svg" width="40px" /> (참고) 일반적으로 useEffect를 사용하는 경우는 아래와 같습니다.
SSR(Server-Side Rendering) 환경에서 useLayoutEffect를 사용하면 자바스크립트가 모두 실행되기 전까지 useLayoutEffect는 서버 렌더러의 출력형식으로 인코딩할 수 없기 때문에 서버에서 아무 작업도 수행하지 못합니다. 따라서 의도했던 UI와 일치하지 않는 현상이 발생합니다. 이러한 문제를 사전에 방지하기 위해 '클라이언트'에서 렌더링하는 컴포넌트에서만 useLayoutEffect를 사용해야 합니다.
또한, useLayoutEffect는 ****동기적으로 ****실행되기 때문에 내부에 서버에서 불러오는 시간이 오래 걸리는 작업이 있거나 내부의 로직이 복잡할 경우 레이아웃이 브라우저에 보여지기까지 시간이 오래 걸린다는 단점이 있습니다. 상황에 따라 useLayoutEffect를 적절하게 사용해야하며 기본적으로 useEffect를 사용하는 것을 권장합니다.