home

updater function

Tags
react
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)와 같이 명명하기도 한다.