useEffect vs useLayoutEffect

React 세부사항

Posted by jopemachine on November 13, 2021 Updated on September 29, 2022

useEffect vs useLayoutEffect

둘은 같은 API를 갖고 있고 이름도 비슷한데 어떻게 다른가?

useEffect로 전달된 콜백은 Layout, Paint 이후 발생한다.

(두 번째 인자로 전달된 상태의 변화에 맞춰 바로 동기적으로 실행되는 게 아니라 지연한다)

대다수의 Side effect가 이렇게 다뤄져야 하므로 일반적으로 useEffect를 사용해야 한다.

하지만 특정 이펙트들은 레이아웃이 일어나기 전에 상태의 변화에 맞춰 동기적으로 실행되어야 한다.

이런 이펙트들은 useEffect 보다 useLayoutEffect로 구현하는 편이 좋다.

그리고 useLayoutEffect동기적으로 일어나기 때문에 당연히 무거운 작업을 넣어 놓으면 안 된다.