[3장][효중] 리액트 훅 깊게 살펴보기 (2)

[khj0426]

퀴즈

useEffect와 useLayoutEffect 훅의 차이를 설명해주세요

답

정답

useLayoutEffect 는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 동기적(synchronous) 으로 실행됩니다 useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다.

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[HeeSeok-kim]

정답

useLayoutEffect는 DOM이 업데이트 된 이후 실행되고 동기적으로 실행되어 성능에 문제가 생길수 있다. useEffect는 브라우저가 변경사항을 업데이트 한 이후 실행된다.

[hyoribogo]

정답

useLayoutEffect는 DOM이 업데이트 된 후 실행
useEffect는 브라우저에 모든 변경 사항이 반영된 후 실행

[hayamaster]

useLayoutEffect은 리액트 렌더링후에 실행되며 useEffect는 브라우저 렌더링 이후에 실행된다.
또한 useLayoutEffect의 콜백은 동기적으로 동작한다.