[React] useEffect 과 useLayoutEffect의 차이점

WEB/React

[React] useEffect 과 useLayoutEffect의 차이점

선서니 2023. 11. 1. 23:25

코드 리뷰를 하면서 이런 피드백을 받게 되었다

🤔🤔 useLayoutEffect요..?

데이터를 fetching해서 초기 state값을 fetching한 데이터 값으로 바꾸는 로직을 useEffect를 사용해서 구현했다. 초기 화면을 그리기 전에 필요한 데이터를 넣는 부분은 지금까지 계속 useEffect로 구현했었기에 useEffect를 사용했는데 갑자기 useLayoutEffect라는 친구가 등장했다. 이름이 비슷하니까 useEffect와 비슷한거 같긴하데 정확하게 뭐길래 실행 순서에 따라 사용해야하는 훅이 다른걸까?

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);
  
useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);

위 코드에서처럼 useEffect와 useLayoutEffect의 사용법은 정확히 동일하다! 다른 점은 함수 이름에 Layout이 있냐 없냐 뿐인 것 같다... 하지만 정말 다른 부분은 각 함수들이 호출되는 시간이다!

두 함수의 차이점에 대해 자세히 알기 전에 리액트의 렌더링 과정에 대해 간단하게 살펴보고자 한다.

리액트의 렌더링 과정

렌더링은 React가 컴포넌트에게 현재 Props와 State에 기반해 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다.

1. 렌더 단계

:: 컴포넌트를 렌더링하고 변경 사항을 계산하는 모든 과정이 이루어지는 단계

2. 커밋 단계

:: 변경 사항을 실제 DOM에 적용하는 단계

3. 페인트 단계

:: 브라우저가 실제 DOM을 화면에 그리는 단계로 didMount가 완료되는 단계

useEffect

useEffect는 컴포넌트들이 페인트 단계까지 실행된 후 비동기적으로 실행된다. 페인트 된 후 실행되기 때문에 useEffect 훅 안에 DOM에 영향을 주는 코드가 있을 경우 사용자는 화면의 깜빡임을 보게 된다. 기본적으로 아래 과정으로 동작한다.

useLayoutEffect

useLayoutEffect는 컴포넌트들이 렌더 단계까지 실행된 후 동기적으로 실행된다. 그리고 그 후에 페인트 단계가 실행된다. 페인트 단계 전에 실행되기 때문에 useLayoutEffect 훅 안에 DOM에 영향을 주는 코드가 있더라도 사용자는 화면의 깜빡임을 경험하지 않게 된다.

언제 useEffect를 쓰고 언제 useLayoutEffect를 써야할까?

useLayoutEffect는 동기적으로 실행되기 때문에 내부 코드가 모두 종료되기 전에는 페인트 단계가 실행되지 않아 화면이 그려지지 않는다. 따라서 내부 로직이 복잡하다면 성능 저하가 있을 수도 있고 그에 따라 사용자는 화면을 보기까지 오랜 시간을 기다려야 할 수도 있다.

따라서 대부분의 경우에는 useEffect를 사용하되, 첫 화면을 렌더링 할 때 화면이 깜빡인다면 useLayoutEffect를 사용할 수 있다.

다시 처음으로 돌아가서 코드리뷰 내용을 살펴보면,

useEffect 훅 안에서 DOM에 영향을 주는 state를 업데이트 하고 있었고 state가 바뀌면서 재랜더링이 일어나 화면에 깜빡임이 나타났다. useEffect 훅 내부 코드는 사실상 첫 화면을 렌더링 할 때 필요한 데이터를 가지고 있어 실제로 브라우저가 화면을 그리기 전 즉, 페인트 단계 전에 실행되어야 하는 것이 실행 순서 상 맞기 때문에 useEffect 대신 useLayoutEffect 훅을 사용하는 것이 바람직 하다!