[TIL] 함수형 업데이트

기존 setState 업데이트 방법

button onClick={() => {
	setNumber(number + 1);
}}

이렇게만 하던걸 함수형으로 업데이트하는 방식을 쓰면

<button onClick={() => {
	setNumber((currentNum) => {
    	return currentNum + 1;
    })
}}>

이 방법은

// 배치 업데이트
setNumber(number + 1);

// 함수형 업데이트
setNumber((currentNumber) => currentNumber + 1);

배치형 업데이트는 명령을 모아서 한번만! 실행한다.

함수형은 순차적으로 각각 한번씩 실행한다.

인자부분에 현재의 State를 가져오고, 바뀐 State를 반환한다.

왜 이렇게 만들었는지?

리액트 환경안에서 잦은건 성능에 이슈가 있는것이다.

developeryeon