3.1.9 useLayoutEffect

https://react-ko.dev/reference/react/useLayoutEffect

특징

useEffect와 동일한 문법과 기능을 제공
호출 순서가 다르다.

• useEffect는 브라우저에 변경 사항이 반영된 이후에 실행
• useLayoutEffect는 브라우저에 변경 사항이 반영되기 전에 실행

실행 순서

1. 리액트가 DOM을 업데이트
2. useLayoutEffect를 실행
3. 브라우저에 변경 사항을 반영
4. useEffect를 실행

주의점

• 동기적으로 실행되어 useLayoutEffect가 렌더링 성능에 영향을 끼친다.
  • useLayoutEffect가 끝날때까지 기다림
  • React는 브라우저가 화면을 다시 그리기 전에 useLayoutEffect 내부의 코드와 그 안에서 예약된 모든 state 업데이트가 처리되도록 보장합니다. 이를 통해 사용자가 첫 번째 리렌더링을 눈치채지 못하게 한 상태에서 툴팁을 렌더링하고, 측정한 후, 다시 툴팁을 렌더링하게 해줍니다. 즉, useLayoutEffect는 브라우저의 페인팅을 차단합니다.

    활용 사례

• DOM이 변경된 상태에서 화면에 반영되기 전에 하고싶은 작업이 있는 경우
• 특정 요소에 따라 DOM 요소를 기반으로 한 애니메이션, 스크롤 위치를 제어하는 등
• 화면에 반영되기 전에 하고 싶은 작업에 사용

Strict Mode

• Strict Mode가 켜져 있으면 React는 첫 번째 실제 셋업 전에 개발 전용 셋업+클린업 사이클을 한 번 더 실행합니다. 이는 클린업 로직이 셋업 로직을 “미러링”하고 설정이 수행 중인 모든 작업을 중지하거나 취소하는지 확인하는 스트레스 테스트입니다. 문제가 발생하면 클린업 함수를 구현하세요.
• 클린업 로직이 셋업 로직을 미러링해서 잘 정리가 되는지~

---

리액트 렌더 실행 순서

• #TODO 알아보기
• useInsertionEffect 란 것도 있다.
  • 생긴건 똑같