useEffect 와 useLayoutEffect 차이

 

 

 

React의 useEffect와 useLayoutEffect 훅은 둘 다 컴포넌트 라이프사이클에 부수 효과(side effects)를 수행할 수 있게 해주지만,

실행 시점에 차이가 있다

이러한 차이는 특정 상황에서 중요할 수 있으며, 각각의 사용 사례를 이해하는 것이 중요하다

 

useEffect

• useEffect 훅은 DOM 업데이트가 이루어진 직후에 비동기적으로 실행된다
  • 즉, 브라우저가 화면을 그리고 난 뒤에 실행되기 때문에, 이 훅을 사용하는 동작은 렌더링 결과에 영향을 주지 않고, 사용자에게 눈에 띄는 지연 없이 실행된다
• 일반적인 부수 효과 처리에 사용된다
  • 예를 들어, 데이터 fetching, 이벤트 리스너 등록/해제, 수동 DOM 조작 등
• 사용자에게 눈에 띄는 깜빡임이나 레이아웃 이동 없이 부수 효과를 수행할 수 있다

useLayoutEffect

• useLayoutEffect 훅은 DOM 업데이트 직후, 그러나 브라우저가 화면에 변화를 그리기 전에 동기적으로 실행된다
  • 즉, useLayoutEffect 내의 코드는 브라우저가 어떤 그리기도 수행하기 전에 완료된다
• 이 훅은 DOM의 레이아웃을 읽거나 변경할 때 사용된다
  • 예를 들어, 스크롤 위치 조정, DOM 요소의 크기나 위치 측정 등
  • 이러한 작업이 렌더링 사이클에 포함되어야 할 때 useLayoutEffect를 사용
• useLayoutEffect에서 수행된 작업으로 인해 추가적인 렌더링이 발생할 수 있으므로, 성능에 영향을 줄 수 있다
  • 따라서 필요한 경우에만 사용

차이점 요약

• 실행 시점
  • useEffect는 비동기적으로 실행되며, 브라우저가 화면을 그린 후에 실행
  • useLayoutEffect는 동기적으로 실행되며, 화면 그리기 전에 실행
• 사용 사례
  • useEffect는 대부분의 부수 효과를 처리하는 데 사용되며, 렌더링에 영향을 주지 않는 작업에 적합
  • useLayoutEffect는 DOM의 레이아웃을 읽거나 수정해야 할 때 사용되며, 렌더링 사이클에 직접적으로 관련된 작업에 사용

일반적으로는 useEffect를 사용하는 것이 권장되지만,

레이아웃을 직접적으로 조작해야 하거나, 렌더링 사이클에 영향을 주는 작업을 수행해야 할 때는 useLayoutEffect를 사용하는 것이 더 적절할 수 있다