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

[HeeSeok-kim]

퀴즈

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]

정답

1. 리액트 렌더링 2. useLayoutEffect 실행 3. 브라우저 렌더링 4. useEffect 실행

[hyoribogo]

정답

useLayoutEffect 0
useEffect 0

[khj0426]

정답

useLayoutEffect ,1 useEffect,1