둘 다 렌더링된 후 특정 작업을 수행하기 위해 사용
but
실행되는 타이밍과 용도가 다름
useEffect
렌더링이 완료되는 시점에 비동기적으로 실행
즉, 화면이 실제로 사용자에게 그려진 후, useEffect가 실행되는 방식
useEffect는 보통 데이터를 가져오는 작업, 이벤트 리스너 추가 등 렌더링 후 화면에 직접적인 영향을 주지 않는 작업에 주로 사용
useLayoutEffect
렌더링 후 DOM이 업데이트되기 직전의 시점에 동기적으로 실행
여기서 말하는 동기적은 화면에 내용이 그려지기 전 모든 레이아웃 관련 작업이 완료된다는 의미
예를 들어, DOM의 크기를 측정하거나 위치를 조정해야할 때 useLayoutEffect를 사용하면 즉각적으로 그 변경사항이 반영되어 화면 깜빡임이나 불필요한 재렌더링을 방지할 수 있음
렌더링 후 실행되는 비동기 작업 - useEffect
레이아웃 작업이나 DOM조작과 같이 화면이 그려지기 전에 완료되어야 하는 작업 - useLayoutEffect
useEffect는 사용자 데이터를 API로부터 가져올 때 자주 사용
데이터가 렌더링 후 설정되면 화면이 자연스럽게 업데이트
useEffect(()=>{
fetchData().then(data => setData(data));
},[]);useLayoutEffect는 DOM의 크기 측정해서, 다른 요소의 위치를 조정해야 할 때 유용
ex- 어떤 요소의 높이를 측정해 그 높이에 맞춰 레이아웃을 맞추고 싶을 때 사용
useLayoutEffect(()=>{
const height = ref.current.offsetHeight;
setHeight(height);
},[]);단 useLayoutEffect 사용 시 성능 면에서 주의해야함
동기적으로 실행되기 때문에 너무 많은 작업이 실행되면 렌더링이 느려질 수 있음
보통은 useEffect를 기본적으로 사용하고, 화면에 영향을 주는 작업만 useLayoutEffect로 처리하는 것이 좋음
