[3장][희석] 리액트 훅 깊게 살펴보기 (2)
Closed this issue · 3 comments
HeeSeok-kim commented
퀴즈
function App() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('useEffect', count)
},[count])
useLayoutEffect(() => {
console.log('useLayoutEffect', count)
},[count])
function handleClick() {
setCount((prev) => prev + 1)
}
return (
<>
<h1>{count}</h1>
<button onClick={handleClick}>+</button>
</>
)
}
위 코드의 실행순서를 작성해주세요
답
정답
1. 리액트가 DOM을 업데이트
2. useLayoutEffect 실행
3. 브라우저에 변경 사항을 반영
4. useEffect를 실행
댓글 작성법
(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>
hayamaster commented
정답
1. 리액트 렌더링
2. useLayoutEffect 실행
3. 브라우저 렌더링
4. useEffect 실행
hyoribogo commented
정답
useLayoutEffect 0
useEffect 0
khj0426 commented
정답
useLayoutEffect ,1
useEffect,1