useLayoutEffect

컴포넌트 생명주기를 관리하기 위해 사용되는 Hook 

 

useEffect

• 비동기적으로 실행
• 이벤트 루프의 테스크 큐에 콜백이 쌓이는 방식으로 동작
• useEffect의 콜백이 task queue에 쌓여, DOM 업데이트 후 실행되기 때문
• 비동기 작업이나 DOM업데이트 후에 실행되어야 하는 작업에 사용
• 사용되는 케이스: 데이터 fetching, 이벤트 리스너

 

useLayoutEffect

• 동기적으로 실행
• DOM이 업데이트 되기 전에 실행
• 렌더링 후, 페인팅 전에 실행
• DOM 조작이나 레이아웃 측정과 같은 작업에 사용
• 동기적 실행으로 인해 성능에 영향이 있을 수 있어 필요한 경우에만 사용
• 사용되는 케이스: 툴팁, 모달, DOM 측정 ( DOM요소의 크기나 위치 측정이 필요한 경우 )