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
Author And Source
이 문제에 관하여(hook_LayoutEffets 란?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ldhoon/hookLayoutEffets-란저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)