[React] useEffect와 useLayoutEffect의 차이

 

useEffect와 useLayoutEffect의 차이

(+ DOM)

 

---

 

# useEffect와 useLayoutEffect의 차이 : 실행 순서

 

 React hooks 중 useEffect와 useLayoutEffect는 비슷한 역할을 하지만 실행 시점에 차이가 있다. 우선 이 둘의 차이를 설명하기 전에 DOM에 대해 먼저 짚고 넘어가자.

 

 브라우저 렌더링 엔진은 HTML 문서를 DOM 트리로 만든다. 그리고 DOM 트리를 이용하여 화면의 레이아웃을 계산하고, 계산된 결과를 화면으로 보여준다. 이 작업을 렌더링이라고 한다.

 

(브라우저 렌더링과 DOM 자세한 내용 : https://inthedev.tistory.com/16)

 

 

# useEffect

 

 useEffect는 렌더링을 마치고 실행된다. 만약 useEffect 내부에 DOM에 영향을 주는 코드가 있다면 렌더링이 완료된 후 다시 DOM을 변경하고 렌더링 하기 때문에 화면의 깜빡거림이 발생한다.

 

 

# useLayoutEffect

 

 useLayoutEffect는 화면의 레이아웃을 계산하기 이전에 실행된다. 즉, 내부에 DOM을 변경하는 코드가 존재하더라도 화면에 깜빡거림이 발생하지 않는다.

 

 

# 언제 사용해야 하는지

 

 useLayoutEffect를 사용하면 그 내부의 코드가 모두 실행되고 DOM의 변경까지 완료된 후 화면이 출력되기 때문이 로딩 시간이 길어질 수도 있다는 단점이 있다. 그러니 일반적인 경우에는 useEffect를 사용하고, DOM을 조작하는 코드를 사용할 때 useLayoutEffect로 사용하는 것이 좋다.

 

---

 

참고 자료

 

https://ko.reactjs.org/docs/hooks-reference.html#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