useState 함수형 업데이트

함수형 업데이트

() 괄호 안에 값을 변경하는 코드를 작성하면 된다.

아래 코드를 보면, onClick 안에서 setNumber를 3번 호출하는 코드가 있다.

일반 useState

이렇게 하면, 나는 1씩 증가하는 코드를 3줄 넣었는데 버튼을 눌러도 1씩만 증가하는것을 확인할 수 있다.
이유는 버튼을 클릭 시, 코드가 각각 처리되는게 아니라 batch로 처리 된다.
최종적으로 한번만 실행을 시킨다는 뜻 이다.
그래서 저 코드를 100번 적어도 한번만 처리된다.
number라는게 onclick 함수 바깥에 있어서 일어나는 일 같다.

함수형 useState

함수형으로 업데이트 해주었다.
previousState 라는 인자는, 어디에도 없다.
onclick 함수 내에만 있기에 각 줄마다 previousState는 1씩 증가한다.
그래서 버튼을 클릭해주면 3씩 증가되는 것을 볼수 있다.