useEffect 와 useLayoutEffect 모두 컴포넌트가 렌더링 될 때 특정 작업을 수행한다는 부분에 대해서 비슷하다고 할 수 있는 훅이다. 하지만 분명 다른점이 있다.
useEffect
- 비동기적으로 실행된다.
- 컴포넌트 렌더링 -> 화면 업데이트 -> useEffect실행
- 페인팅 이후에 useEffect를 실행
- DOM과 상호작용이 필요없는 경우 (대부분의 경우)
- DOM 변경사항을 관찰할 수 없는 경우
data fetching과 같은 작업을 할 때는 데이터를 비동기적으로 받아오는 것이 유저 경험에 좋다. 왜냐하면 flickering이 일어나도 먼저 레이아웃을빠르게 보여준 후 데이터를 넣는 방식으로 작동하는 것이 일반적이기 때문이다. 또는 이벤트 핸들러를 붙여주는거나 모달창을 열고 닫으면서 state를 조작하는 것도 하나의 예시이다.
useLayoutEffect
- 동기적으로 실행된다.
- 컴포넌트 렌더링 -> useLayoutEffect 실행 -> 화면 업데이트
- 페인팅 이전에 useLayoutEffect를 실행
- DOM을 변형(mutate)하거나 렌더링 직후 DOM요소의 값을 읽을 때 유용하다. 왜냐하면 DOM을 조작하는 코드가 있더라도 flickering하지 않기 때문이다.
ex) 요소 scroll position 가져오기, 기타 스타일 가져오기 등
useLayoutEffect는 변화된 DOM을 브라우저가 렌더할 때 동기적으로 변화가 완료된 DOM을 보여주게된다. 직접적으로 DOM 자체를 조작할 때 사용할 수 있도록 최적화되어있는 훅이다.
DOM의 변화가 있는 코드 작성 시엔 useLayoutEffect를 사용한다.
기본적으로 useEffect를 먼저 사용하고, 문제를 일으킨다면 useLayoutEffect를 사용하는게 좋다. 왜냐하면 useLayoutEffect 훅 내부에서 side effect 함수 연산을 많이 한다면 브라우저가 먹통일 될 수도 있기 때문이다.
정리
useEffect는 비동기적으로 실행되고, 컴포넌트가 렌더링되면 우선 업데이트된 화면을 보여주고, useEffect를 실행해 변화를 준다.
반면에 useLayoutEffect는 동기적으로 실행되며, 컴포넌트가 렌더링되면 useLayoutEffect를 실행하고, 변화를 적용 시킨 후에 업데이트된 화면을 보여준다.
이는 useLayoutEffect가 적용되기 전까지를 시각적으로 보여주지 않기 때문에 useLayoutEffect를 사용해서 blocking 특유의 flickering을 방지할 수 있다. 문제는 이 작업이 오래걸리면 유저는 빈 화면을 보게되는 문제점이 있다.
결국 이 두개의 hook의 가장 큰 차이점은 실행 시점이라고 볼 수 있다.
