useEffect와 useLayoutEffect
Render : Dom Tree를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
Paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정
useEffect
- 컴포넌트가 render와 paint 된 후 실행
- 비동기적 실행
- paint된 후에 실행되기 때문에, useEffect 내부에 Dom에 영향을 주는 코드가 있을 경우 화면의 깜빡임이 일어날 수 있음
useLayoutEffect
- 컴포넌트가 render 된 후 실행, 그 이후에 paint
- 동기적 실행
- paint 전에 실행되기 때문에 dom을 조작하는 코드가 존재해도 화면의 깜빡임이 일어나지 않음
- 단, 로직이 복잡할 경우 사용자가 레이아웃을 보기까지 시간이 오래걸릴 수 있음
기본적으로는 useEffect를 사용하는 것을 권장
- React 공식문서에서는 useEffect를 먼저 사용한 후에 문제가 생일 경우 useLayoutEffect를 사용하는 것을 추천함
- Next.js 등 SSR에서 useLayoutEffect를 적용할 경우 오류 발생할 수 있음
The warning you provided is related to the usage of
useLayoutEffect
in a React component. React displays this warning to alert you that using
useLayoutEffect
in a component may lead to a mismatch between the initial server-rendered UI and the intended client
