hook_LayoutEffets 란?

깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다.

useLayoutEffect

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

useEffect

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

uselayoutEffect와 useEffect와 동일한 형태를 가진다.

uselayoutEffect와 useEffect 차이점

useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다.
따라서 상태값이 effect에 의존할 경우 약간 불편한 사용자 경험으로 이어질 수 있다.

useLayoutEffect 훅은 바로 이런 문제를 해결하기 위해 등장한 훅입니다.

LayoutEffect 훅은 위에 이미지와 같이 브라우저에 스크린에 페인팅 되기 전에 실행되어 화면에 DOM을 그리기 전에 이펙트를 수행해 코드의 실행 순서도 달라지게 된다.

TL;DR

• useEffect의 이펙트는 DOM이 화면에 그려진 이후에 호출된다.

• useLayoutEffect의 이펙트는 DOM이 화면에 그려지기 전에 호출된다.

• 따라서 렌더링할 상태가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect를 활용하자!

[참고] https://merrily-code.tistory.com/46