[React] useLayoutEffect, useEffect 차이

 

얼마전 다른사람의 포트폴리오를 구경하던중 "useLayoutEffect 로 렌더링 속도 향상" 이라는 문구를 보고 이것은 뭘까.. 생각이 들어서

관련해서 무엇인지 알아보기로 했다

 

관련하여 살펴보니 브라우저 렌더링 과정과 어느정도 관련이 있었다

https://yangwonjoon.tistory.com/69

[Web] 랜더링이란 무엇인가?

이 포스팅에서는 브라우저 랜더링 과정을 아래와 같이 구분 지었다

1. DOM 트리, CSSOM 트리 생성
2. 랜더링 트리 생성
3. 레이아웃
4. 페인팅

이 과정중 3번 레이아웃까지의 과정을 Render라고하고 4번을 Paint라고 칭하고 나서

useEffect와 useLayoutEffect의 차이점은 어디서 실행되느냐이다

 

 

 

useEffect는 paint 과정까지 끝나고 실행되며 비동기적으로 실행된다. 

useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 경험한다

 

useLayoutEffect는 Render 단계가 끝나고 동기적으로 실행된다.

Paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 못한다

 

 

공식 문서에 따르면, useLayoutEffect는 성능을 저하시킬 수 있기 때문에 가능하면 useEffect을 사용하라고 권고한다.

동기적으로 실행되기 때문에 내부 로직이 너무 복잡할 경우에는 사용자가 레이아웃을 보기까지 시간이 오래 걸리기 때문에 특별한 경우가 아니고서는 useEffect를 사용하면 될 것 같다!

 

useLayoutEffect를 사용하는 경우는 이 정도..? 일 것 같다

• 플래시 또는 깜빡임을 방지하고 싶을 때
• DOM 조작이 필요한 경우