React를 사용하여 프로젝트를 진행하면서 UseEffect를 주로 사용하였고, 추가적으로 특정 Function에서 UseLayoutEffect를 사용하였는데, 특별한 차이를 모르겠어서 찾아보고 정리하려고 한다.
먼저, 둘이 차이를 구분하기 전 Render와 Paint에 대해 알 필요가 있다.
✏️ Render란?
DOM Tree를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
✏️ Paint란?
실제 스크린에 Layout을 표시하고 업데이트하는 과정
✨ useEffect
useEffect는 컴포넌트들이 render와 paint 된 후 비동기적으로 실행된다. paint 된 후 실행되기 때문에, useEffect 내부 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 된다.
✨ useLayoutEffect
useLayoutEffect는 컴포넌트들이 render 된 이후 실행되며, 그 이후 paint가 되는데 이 작업이 동기적으로 실행된다. paint가 되기 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다.
📖 UseEffect와 UseLayoutEffect의 차이점
useLayoutEffect는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거친다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어, 기본적으로는 항상 useEffect를 사용하는 것이 좋다.
- 데이터 fetch
- event handler
- state reset
작업은 useEffect를 사용하면 되고,
const [value, setValue] = useState(0);
useLayoutEffect(() => {
if (value === 0) {
setValue(10 + Math.random() * 200);
}
}, [value]);state가 존재하며, 해당 state이 조건에 따라 첫 painting 시 다르게 렌더링 되어야 할 때는 useEffect 사용시 처음에 0이 보여지고 이후에 re-rendering이 되어 화면이 깜빡거려지기 때문에 useLayoutEffect를 사용하는 것이 좋다.
