✔️ useEffect
useEffect는 컴포넌트들이 render와 paint 된 후에 발생된다. 비동기적(asynchronous)으로 실행되며 대부분 DOM과 인터렉션이 없는 경우에 사용된다. DOM에 영향을 주는 코드가 있을 경우 화면의 깜빡임을 볼 수 있다.
✔️ useLayoutEffect
useLayoutEffect는 컴포넌트들이 render 된 후 실행되고 이후에 paint가 된다. 동기적(synchronous)로 실행되며 paint가 되기 전에 실행되므로 화면 깜빡임을 경험하지 않는다.
✔️ 결론
결론을 먼저 말하자면 기본적으로는 항상 useEffect를 사용하고 화면 깜빡임 현상이 나타나면 useLayoufEffect를 사용하는 것을 권장한다.
useLayoufEffect는 동기적으로 실행되고 내부의 모든 코드가 실행된 후에 paint 작업을 거친다. 그러므로 로직이 복잡할 경우에는 사용자가 레이아웃을 보는데까지 시간이 오래 걸린다는 단점이 있다.
.