useEffect와 useLayoutEffect의 차이점

출처: 매일메일

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용되는 훅이다. 하지만 실행되는 타이밍과 용도가 다르다.

useEffect

useEffect는 렌더링이 완료되는 시점에 비동기적으로 실행된다. 즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되는 방식이다.
따라서 useEffect는 보통 데이터를 가져오는 작업이나 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적인 영향을 주지 않는 작업에 주로 사용된다.

useEffect(() => {
fetchData().then(data => setData(data)); // 렌더링 후 데이터 가져오기
}, []);

위 예시처럼 useEffect는 API 호출을 통해 데이터를 가져오는 상황에 적합하다. 데이터가 렌더링 후에 설정되면 화면이 자연스럽게 업데이트되는 것이다.

---

useLayoutEffect

useLayoutEffect는 렌더링 후, DOM이 업데이트되기 직전의 시점에 동기적으로 실행된다. 여기서 동기적이라는 것은 화면에 내용이 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 의미이다.
예를 들어, DOM의 크기를 측정하거나 위치를 조정해야 할 때 useLayoutEffect를 사용하면 즉각적으로 그 변경사항이 반영되어 화면 깜빡임이나 불필요한 재렌더링을 방지할 수 있다.

useLayoutEffect(() => {
const height = ref.current.offsetHeight; // DOM의 높이를 측정
setHeight(height); // 측정한 높이에 따라 레이아웃 조정
}, []);

위와 같은 경우, 요소의 높이를 기반으로 다른 레이아웃 컴포넌트를 조정하고자 할 때 useLayoutEffect를 사용하면 적합하다.

---

정리

• useEffect: 렌더링 후 비동기 작업을 수행하는 데 적합하다. 예를 들어, 데이터 가져오기 혹은 렌더링 후 작업에 주로 사용된다.
• useLayoutEffect: 화면에 영향을 주는 레이아웃 작업이나 DOM 조작과 같이 화면이 그려지기 전에 완료되어야 하는 작업에 적합하다.

---

주의사항

• useLayoutEffect는 동기적으로 실행되기 때문에 너무 많은 작업이 실행되면 렌더링 성능이 저하될 수 있다.
  따라서, 기본적으로는 useEffect를 사용하고, 꼭 필요한 경우에만 useLayoutEffect를 사용하는 것이 좋다.