설명

컴포넌트 Render와 Paint 사이에 실행되는 Hook

용어

• Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

리액트 훅 실행순서

useEffect와의 useLayoutEffect

useEffect

• Render와 Paint 후 실행
• 비동기적(asynchronous)으로 실행
• Paint 된 후 실행되기 때문에, useEffect내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됨

useLayoutEffect

• Render후 실행
• 동기적(synchronous) 으로 실행
• paint가 되기전에 실행되기 전에 dom을 조작하는 코드가 존재하더라도 사용자는 감빡임을 경험하지 않음

단점

• useLayoutEffect는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting작업을 거침.
• 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다
• 기본적으로는 항상 useEffect만을 사용하는 것을 권장

사용

• useEffect와 동일

useLayoutEffect(() => {
  // effect
  return () => {
    cleanup
  };
}, [input])