import { useState } from 'react';
export default function Counter() {
const [number, setNumber] = useState(0);
return (
<>
<h1>{number}</h1>
<button onClick={() => {
setNumber(n => n + 1);
setNumber(prevNumber => prevNumber + 1);
setNumber(prevNumber => prevNumber + 1);
}}>+3</button>
</>
)
}
TypeScript
복사
•
setState 시 함수 형태로 이전 값을 참조하여 state 값을 설정함
•
해당 함수형 setState를 updater function이라고 한다.
•
컨벤션으로 state의 첫 글자를 따와서 이전 값을 명명하며 때로는 prev + state 명(number, prevNumber)와 같이 명명하기도 한다.