[React] useEffect vs useLayoutEffect

우연한 기회로 useLayoutEffect의 존재를 알게 되었다. 일단 React 공식문서를 한번 훑어보고 블로그 글을 참조해서 개념을 정리해 보았다. 내 생각에는... 그냥 면접 질문용이 아닐까 싶다. (실전에서 잘 안 쓰는 것 같음)

 

차이점

(useLayoutEffect 사용하지 말래요.)

 

useEffect와 useLayoutEffect를 비교하려고 보았을 때 둘은 매우 유사한 이름을 가지고 있고 공식문서 상에서도 둘은 동일하다고 말한다.

출처 : https://ko.reactjs.org/docs/hooks-reference.html#uselayouteffect

차이점은 useEffect는 브라우저에 화면이 그려진 후에 실행되고, useLayoutEffect는 브라우저에 화면이 그려지기 전에 실행된다는 점인 것 같다. (+ useLayoutEffect는 동기적으로 발생한다.)

출처 : https://targetcoders.com/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B0%A8%EC%9D%B4/

이정도면 useLayoutEffect는 사용하지 마세요.라고 말하는 게 아닐까 싶다.

 

 

동작 순서

블로그를 참고하던 중 아래 짤을 봤는 데 렌더링 과정을 잘 보여주는 것 같아서 가져왔다.

출처 : https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-useEffect%EC%99%80-useLayoutEffect-%EB%B9%84%EA%B5%90%EC%8B%9C%EB%A6%AC%EC%A6%88

위 사진에서

 

React updates DOM은 브라우저에 화면을 그리는 게 아니라 "React 엘리먼트와 DOM을 일치시키기 위해서 DOM을 업데이트하는 과정"이라고 한다.

 

Browser paints screen은 실제로 브라우저에 렌더링 된 DOM을 그리는 과정이다.

 

+ 설명 추가 (2024.01.15)

• useEffect는 DOM이 그려진 후(rendering 후) 실행됨
• useLayoutEffect는 DOM이 그려지기 전, 후(rendering 전, 후)에 실행됨