useLayoutEffect와 useEffect의 렌더링

useEffect

---

useEffect는 컴포넌트들이 render와 paint 된 후(렌더링 이후) 비동기적으로 실행

paint 이후 실행되기 때문에 useEffect 내부에 DOM 에 영향을 주는 코드가 있을 경우, 화면을 다시 그리므로 사용자 입장에서는 화면 깜빡임을 보게 됩니다.

이펙트 함수와 DOM 화면이 복잡해지면 렌더링 시간이 복잡해지거나, 상태값이 이펙트에 의존할 경우 화면이 깜박이는 현상을 겪을 수 있어 사용성을 해칠 수 있다.

render→paint→useEffect

useLayoutEffect

---

DOM이 업데이트 직후 동기적으로 실행

useEffect의 깜빡임 문제를 해결하기 위해 등장한 훅임

useEffect와 훅의 형태는 완전히 동일하지만, DOM을 그리기 전 useLayoutEffect가 실행됨

render→useLayoutEffect→paint순으로 실행
HTML 영역을 화면에 그린다 👉 useEffect 실행 👉 state 호출 👉 HTML을 재렌더링

useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가됨

• undefined를 반환함

---

useLayoutEffect는 동기적으로 실행되므로 사용자가 레이아웃을 보는데 까지 시간이 오래 걸린다는 단점

기본적으로는 항상 useEffect 만을 사용하는 것을 권장

useEffect가 paint 전에 발생하는 상황도 있다.

useLayoutEffect에서 state 변경에 의한 re-render이다.

---

언제 쓰는게 좋냐?

• useEffect
  • 데이터 fetch
  • event handler
  • state reset
• useLayoutEffect
  • DOM을 변경해야하는 경우
  • 계산된 state값을 화면에 표출해야 하는 경우
  • 애니메이션 구현
  • 성능 모니터링 기능 크롬 DevTools에서는 layout과 paint 성능을 측정

---

실행순서

React에서는 컴포넌트를 마운팅한 후 해당 컴포넌트를 렌더링한다.

마운팅 단계에서는 useState와 useReducer 등의 훅이 동작한다.

이후 렌더링이 완료되면 DOM에 업데이트를 반영하고 LayoutEffect가 실행된다.

그 다음에 브라우저에서 paint 과정이 일어나게 되고, paint 과정 이후에 비로소 useEffect가 실행된다.