[React] useEffect와 useLayoutEffect 차이

⇨ useEffect와 useLayoutEffect의 차이를 알기 전,

• render : Dom Tree를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정

 

useEffect

useEffect는 컴포넌트들이 render와 paint 된 후 실행 ⇨ 비동기적(asynchronous)

이 훅은 브라우저가 화면을 그린 후에 실행 즉, 모든 DOM 업데이트가 완료된 후 비동기적으로 실행되기 때문에, 화면에 그려진 내용에 영향을 주지 않아 성능 저하를 최소화 할 수 있습니다.

 

다만, 이 때문에 화면에 깜빡이는 현상이 발생할 수 있습니다. 예를 들어, 컴포넌트가 화면에 렌더링된 후에 useEffect 내부에서 상태를 업데이트하면, 업데이터된 상태를 반영하기 위해 컴포넌트가 다시 렌더링 됨. 이 과정에서 화면의 깜빡임이 발생할 수 있어요.

 

 

useEffect 의 라이프사이클 ( 출처 )

 

 

 

useLayoutEffect

useLayoutEffect는 컴포넌트들이 render된 후 실행 ⇨ 동기적(synchronous)

이 훅은 브라우저가 화면을 그리기 전에 실행되므로, useEffect와 달리 화면의 깜박임 없이 동기적으로 DOM 업데이트를 처리할 수 있습니다.

 

그러나, 불필요하게 많이 사용하면 성능 저하를 일으킬 수 있습니다. 대부분의 경우에는 useEffect가 적합하지만,

레이아웃과 관련된 작업을 수행해야 할 때는 useLayoutEffect를 사용하는 것이 좋습니다.

 

useLayoutEffect 의 라이프사이클 ( 출처 )

 

결론

useEffect와 useLayoutEffect는 비슷해 보이지만, 실행 시점의 차이로 인해 서로 다른 용도로 사용됩니다.

대부분의 부수 효과는 useEffect를 사용하여 처리하고, 화면 깜박임 없이 즉각적인 DOM 업데이트가 필요한 경우에는 useLayoutEffect를 사용하는 것이 좋습니다.

 

각 상황에 맞게 적절히 선택하여 사용함으로써, 더 나은 사용자 경험과 성능을 제공할 수 있습니다.