[TIL] useEffect와 useLayoutEffect의 차이점

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

 

오늘의 질문은 useEffect와 useLayoutEffect의 차이점에 대해 설명하는 것이다.

 

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

useEffect

useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook이다.

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

 

예시) useEffect는 사용자 데이터를 API로부터 가져오는 상황에 자주 사용

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

 

useLayoutEffect

useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행되는 useEffect이다.

useLayoutEffect는 렌더링 후 DOM이 업데이트 되기 직전의 시점에 동기적으로 실행된다. 브라우저가 화면을 다시 그리기 전 레이아웃 관련 작업이 완료된다는 것이다. 

 

예시) useLayoutEffec는 어떤 요소의 높이를 측정 후 그 높이에 맞춰 레이아웃을 맞추고 싶을 때 사용

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

정리

정리하면 렌더링 후 실행되는 비동기 작업에는 useEffect가 적합하고, 레이아웃 작업이나 DOM 조작과 같이 화면이 그려지기 전에 완료되어야 하는 작업은 useLayoutEffect가 적합하다.

React 공식문서에서 나온 useLayoutEffect 주의할 점

하지만 useLayoutEffect 사용 시 성능 면에서 주의할 점이 있다. useLayoutEffect는 동기적으로 실행되기 때문에 너무 많은 작업이 실행되면 렌더링이 느려질 수 있다. React 공식 문서에서도 가능하다면 useEffect를 사용하라고 말해준다.

 

https://ko.react.dev/reference/react/useLayoutEffect