메티의 블로그

useEffect 와 useLayoutEffect 차이

useEffect 와 useLayoutEffect 차이

Tags

React

날짜

Feb 1, 2023

상태

공개

한 줄 요약: useEffect 는 CRP 에서 layout 과 paint 가 다 끝난 후 callback 함수가 실행되고, useLayoutEffect 는 layout 과 paint 사이에 callback 함수가 실행된다.

useEffect 는 화면에서 paint 과정이 모두 지난 후 콜백함수를 실행한다.

useLayoutEffect 는 화면에서 paint 가 되기 전에 layout 값을 확인하기 위해 사용하는 함수이다. layout

docs 에선 hover 시 툴 팁을 화면에 뿌려줄 때, paint 되기 전에 자신의 마우스 포인터가 어디에 있는 지에 따라 위치가 달라져야 하기 때문에 일어나는 일로 예시를 들었다.

결론

component 의 크기에 직접 접근해서 paint 해야 할 필요가 있을 경우, useLayoutEffect를 사용한다.

하지만 react 에서는 성능 상의 이슈로 useLayoutEffect를 최대한 사용하지 않는 것을 권장하고 있다.

useLayoutEffect

useLayoutEffect is a version of that fires before the browser repaints the screen. Call useLayoutEffect perform the layout measurements before the browser repaints the screen: See more examples below. Parameters setup: The function with your Effect's logic. Your setup function may also optionally return a cleanup function.

useLayoutEffect

https://beta.reactjs.org/reference/react/useLayoutEffect

useLayoutEffect

[React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?

React 가 웹 프레임워크 시장에서 대세가 되면서, 많은 사람들이 웹 어플리케이션을 제작하기 위해 React 를 사용하고 있습니다. 특히, 2018년 10월의 React Conf 에서 발표된 React Hooks 가 등장함에 따라서 Class Component 기반에서 Functional Component 기반으로 넘어오고 있습니다. 많은 hooks 중에서 useEffect 와 useLayoutEffect 의 차이점을 명확하게 구분하지 못하는 경우가 많아 이번 글에서는 useEffect 와 useLayoutEffect 의 차이점을 설명해 보겠습니다.

[React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?

https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

[React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?

다음 포스트

Margin Collapsing

이전 포스트

CORS

react-hook-form 간단 가이드

TanStack Query 간단 가이드

textarea 입력 3줄 까지만 늘어나게 하기

React-query 캐시 컨트롤

JSX

React 에서의 VirtualDOM