useEffect와 useLayoutEffect 🌊
렌더링된 후에 특정 작업을 수행하기 위해 사용
1. useEffect
⏰ 타이밍
렌더링이 완료되는 시점에 비동기적으로 실행
화면이 실제로 사용자에게 보여진 후에 실행
🛠️ 용도
데이터를 가져오는 작업, 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적으로 영향을 주지 않는 작업에서 사용
사용자 데이터를 API로부터 가져올 때 주로 사용
useEffect(() => {
fetchData().then(data => setData(data));
}, []);useLayoutEffect
⏰ 타이밍
렌더링 후 DOM이 업데이트되기 직전의 시점에서 동기적으로 실행
동기적? 화면에 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 뜻!
🛠️ 용도
DOM의 크기를 측정, 위치를 조정해야할 때 사용
즉각적으로 변경사항이 반영되므로 불필요한 재렌더링 방지 가능
DOM의 크기를 측정해서 다른 요소의 위치를 조정할 때 유용하게 사용 가능
useLayoutEffect(() => {
const height = ref.current.offsetHeight;
setHeight(height);
}, []);동기적으로 실행되므로 작업이 많은 경우 렌더링이 느려지는 단점 발생
➡️ 보통은 useEffect를 사용하고, 화면에 영향을 주는 것만 useLayoutEffect를 사용
