[React] useEffect, useLayoutEffect

 

 

직접 적용해서 사용해본 적은 없지만 useLayoutEffect의 존재에 대해 알게 되어

useEffect와 비교하며 정리를 해보기로 했다.

 

 

useEffect

컴포넌트들이 layout과 paint과정을 거친 이후에 실행된다. 비동기적으로 실행 되며

paint가 된 이후에 실행되기 때문에 useEffect 내부에 dom을 변경하는 코드가 있다면

사용자가 깜빡임을 경험하게 된다.

 

 

const Home = () => {
  const [number, setNumber] = useState(0);
  
  useEffect(() => {
    setNumber(333);
  }, []);
  
  return (
    <div>
        <button>{number}</button>
    </div>
  );
};

이와 같은 코드를 작성했다면, 컴포넌트가 렌더링, paint 된 이후에

setNumber로 인해 number가 변경이 되고, 새로고침 시 0에서 333으로 변경되는 과정에서 깜빡임이 발생한다.

 

 

 

 

useLayoutEffect

 

컴포넌트들이 layout 배치가 된 후 실행되며 paint가 일어나기 전에 동기적으로 실행된다.

브라우저가 paint하기 전에 실행되기 때문에 dom을 변경하는 코드가 있더라도 깜빡이지 않는다.

 

 

 

언제 어떤걸 써야할까?

useLayout은 동기적으로 실행되기 때문에 useLayoutEffect에 작성한 코드들이

모두 실행되어야  paint과정을 거치게 되기 때문에 내부 로직이 복잡하다면 그만큼

paint되기까지에 시간이 소요되어 화면의 업데이트가 늦어질 수 있다.

 

React 공식 문서에도 useEffect를 사용하는 쪽으로 권장을 한다.

 

데이터 패칭이나 이벤트 핸들러 등 일반적으로 useEffect를 쓰되,

렌더링할 상태가 이펙트 내에서 동기적으로 초기화가 되어야한다면 고려해볼 수 있을 듯도 하다.

 

 

 

---

 

Reference

 

https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-useEffect%EC%99%80-useLayoutEffect-%EB%B9%84%EA%B5%90%EC%8B%9C%EB%A6%AC%EC%A6%88