useEffect와 useLayoutEffect의 차이점

useEffect와 useLayoutEffect는 React에서 컴포넌트의 부수 효과를 처리하는 훅으로, 실행 시점과 용도에서 차이가 있습니다.

useEffect

실행 시점: 비동기, 렌더링 완료 후 화면 페인팅 이후 실행.
용도: 데이터 패칭, 이벤트 리스너 추가 등 화면 렌더링에 직접 영향 없는 작업.
성능: 렌더링 블록 없어 성능 유리.
화면 깜빡임: DOM 조작 시 깜빡임 가능성 있음.

useEffect(() => {
  fetchData().then(data => setData(data));
}, []);

useLayoutEffect

실행 시점: 동기, 렌더링 후 DOM 업데이트 직후, 페인팅 전 실행.
용도: DOM 크기 측정, 레이아웃 조정 등 화면에 즉시 반영 필요한 작업.
성능: 과도한 작업 시 렌더링 지연 가능.
화면 깜빡임: 깜빡임 방지 가능.

useLayoutEffect(() => {
  const height = ref.current.offsetHeight;
  setHeight(height);
}, []);

정리

차이점

특징	useEffect	useLayoutEffect
실행 시점	비동기 (페인팅 후)	동기 (DOM 업데이트 후, 페인팅 전)
주요 사용	사례	데이터 패칭, 이벤트 리스너 DOM 측정, 레이아웃 조정
성능 영향	렌더링 블록 없음	렌더링 지연 가능
화면 깜빡임	가능성 있음	방지 가능

요약
useEffect와 useLayoutEffect는 React에서 컴포넌트의 부수 효과를 처리하는 훅으로, 실행 시점과 용도에서 차이가 있습니다.

useEffect는 컴포넌트가 렌더링되고 난 뒤, 비동기적으로 실행되는 훅입니다. 주로 데이터 패칭, 이벤트 리스너 설정처럼 화면 렌더링과 직접 관련 없는 작업세 주로 사용됩니다. 비동기 실행 덕분에 렌더링을 블록하지 않아 성능상 유리하지만, DOM 조작이 포함되면 화면 깜빡임이 발생할 수 있습니다.

useLayoutEffect는 동기적으로 실행되며, DOM이 업데이트된 직후, 화면이 브라우저에 그려지기 전에 동작합니다(리플로우 후 리페인트 전). 이 때문에 DOM의 크기를 측정하거나 레이아웃을 조정하는 작업, 즉 화면에 즉시 반영해야 하는 작업에 적합합니다. 훅을 통해 화면 깜빡임을 방지할 수 있죠. 하지만 동기 실행이라 무거운 작업을 하면 렌더링이 지연될 수 있으니, 꼭 필요한 경우에만 사용하는 게 좋습니다.

결론적으로, useEffect를 기본으로 사용하고, 필수적인 레이아웃 작업에만 useLayoutEffect를 제한적으로 쓰는 게 좋습니다.