[ React ] useEffect 와 useLayoutEffect 의 차이점

useEffect

useEffect 는 컴포넌트들이 비동기적으로 render 와 paint 된 후 실행된다. 

paint 된 후에 실행되기 때문에, useEffect 내부의 dom 에 영향을 주는 코드가 있을 경우, 사용자 입장에서 깜빡거림을 감지할 수 있다.

useLayoutEffect

useLayoutEffect 는 컴포넌트들이 동기적으로 render 된 후 실행, 그 후 paint 된다.

paint 가 되기전에 실행되기 때문에, dom 조작하는 코드가 있더라도 깜빡임이 없다.

 

결론

두 코드의 차이점은 실행 시점이다. 

useLayoutEffect 는 동기적으로 실행되고, 내부의 코드가 모두 실행된 후 painting 작업을 거치기 때문에 레이아웃이 복잡하면 복잡할 수록 화면을 보기까지 시간이 오래걸린다는 단점이 있어, useEffect 를 사용하는 것을 권장한다고 한다.

하지만 state 가 존재하며, 첫 painting 시에 다르게 랜더링 되야하면 useLayoutEffect 를 쓰는것도 좋음

Reference