리액트 - useState 동작 2가지(일반형, 함수형)

useState 동작 방식

 

1. 일반 업데이트 방식

onClick 을 실행했을 때 setNumber가 각각 4번 실행하지 않고, batch 처리되어 1회만 실행함

리액트에서는 명령을 하나로 모아 최종적으로 1회만 실행

=> 버튼 누를 때마다 0, 1, 2, 3, 4...

---

 

2. 함수형 업데이트 방식

명령을 모아 순차적으로 각각 한번씩 실행 시킴,

setNumber가 4번 함수형으로 실행되어 최종적으로 4회를 실행 시킴

=> 버튼 누를 때마다 0, 4, 8, 12, 16...

 

== useState 로 원시데이터가 아닌 데이터를 변경해야 할 때는 불변성을 유지해야 함