🧑🏻💻 useLayoutEffect
useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의useEffect이다.
🍪 useLayoutEffect 문법
useLayoutEffect(setup, dependencies?)🧑🏻💻 참고하기
🍪 주의사항
- 컴포넌트의 최상위 레벨 또는 자체 훅에서만 호출 가능 (React 훅)
- 기타 주의 사항은 useEffect랑 같다.
useLayoutEffect내부의 코드와 여기에서 예약된 모든 state 업데이트는 브라우저가 화면을 다시 그리는 것을 차단한다. 과도하게 사용하면 앱이 느려지기 때문에 가급적이면useEffect를 사용하자useLayoutEffect의 목적은 컴포넌트가 렌더링에 레이아웃 정보를 사용하도록 하는 것이고 레이아웃 정보가 없는 서버에서는 돌아가지 않는다.
🧑🏻💻 활용 및 생각할 거리
🍪 브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기 (화면에서의 위치나 크기를 파악해야 하는 경우)
- ex) 툴팁 (화면 위치에 따라서 툴팁이 아래에 나올 것인지 위에 나올 것인지 판단)
- 사용자가 툴팁이 화면에서 움직이는 것을 보지 않도록 하려면,
useLayoutEffect를 사용하여 레이아웃 측정을 수행한다. 이 Hook 내부의 코드는 레이아웃을 계산하기 전에 실행되므로 사용자는 변경된 내용이 화면에 나타나기 전에 렌더링 업데이트를 적용할 수 있다.
FE 개발자