State 변경 시 주의 할 점

export default Counter => () => {
	const [count, setCount] = useState(0)
	const counterFunction = () => {
	setCount(count+1)
	setCount(count+1)
	setCount(count+1)
	setCount(count+1)
	setCount(count+1)
	} 
return (
	<>
		<div>{count}</div>
		<button onClick={counterFunction}} />
	</>
 )
}

• count 버튼을 누르면 5가 표시가 될까? 정답 X 함수의 스코프와 Lexical Environment에서 count는 0으로 고정 되어있기 때문에.. 0+1 === 1 이 보여진다. 원하는 방식으로 바꾸려면 아래와 같이 해야한다.

export default Counter => () => {
	const [count, setCount] = useState(0)
	const counterFunction = () => {
	setCount((prev) => prev + 1)
	setCount((prev) => prev + 1)
	setCount((prev) => prev + 1)
	setCount((prev) => prev + 1)
	setCount((prev) => prev + 1)
	} 
return (
	<>
		<div>{count}</div>
		<button onClick={counterFunction}} />
	</>
 )
}

• 상태가 업데이트 될 때 Counter라는 컴포넌트 함수를 한번 더 호출 한다. 그리고 변경 된 부분만 업데이트 해준다.