[React] useEffect 와 useLayoutEffect 의 차이는?

useEffect 와 useLayoutEffect 의 차이는?

 

 

먼저 훅의 실행 흐름과 Render, paint 의 개념을 알아두면 좋다.

 

훅 실행 흐름

Render (레이아웃 배치)

DOM tree를 만들기위해서 HTML파일을 파싱하는 style 속성을 계산하는과정.

paint (그리기)

실제 화면에 그려주기위해 Layout을 표시하고 업데이트하는 과정.

 

 

 

useEfffect 

useEffect 는 컴포넌트 레이아웃 배치(render)와 그리기(paint)를 완료한 후 비동기적(asynchronous)으로 실행됩니다.

paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우, 사용자 입장에서는 화면의 깜빡임을 보게 됩니다.

 

 

useLayoutEffect 

useLayoutEffect 는 컴포넌트 레이아웃이 배치(render)된 후 동기적(synchronous)으로 실행되며, 그 이후에 그리기(paint) 가 진행된다. 그려지기(paint) 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

 

 

 

 

 

 

참고

https://github.com/donavon/hook-flow

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

https://merrily-code.tistory.com/46