#3.4 State Functions

state를 세팅하는 데는 2가지 방법이 있다.
1) 직접 할당 :setState(state +1)
2)함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다)

현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)

setCounter()에 값으로 넣을때와 함수를 넣을때의 차이

1. 값으로 여러번
   function onClick() {
   setCounter(counter + 1);
   setCounter(counter + 1);
   setCounter(counter + 1);
   setCounter(counter + 1);
   setCounter(counter + 1);
   }

2. 함수로 여러번
   function onClick() {
   setCounter(current => current+ 1);
   setCounter(current => current+ 1);
   setCounter(current => current+ 1);
   setCounter(current => current+ 1);
   setCounter(current => current+ 1);
   }

1번으로 돌렸을 경우에는 setCounter를 몇번을 호출해도 한 번만 실행되는 걸 볼 수 있고(counter가 1만 증가) 2번으로 돌렸을 경우에는 setCounter가 호출된 만큼(5씩 증가) counter가 증가된 걸 볼 수 있다.

setCounter(counter + 1); 을 사용하여 새로운 state를 업데이트할 때,

setState() 즉각적인 명령이 아니라 컴포넌트를 갱신하라고 요청한다.
setState()는 컴포넌트를 항상 즉각적으로 갱신하지 않음. 오히려 여러 변경 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수 있다. 이로 인하여 setState()를 호출하자마자 this.state에 접근하는 것은 잠재적인 문제가 될 수 있다.

이전 state값을 기준으로 state값을 설정해야 한다면

setCounter(counter + 1); 보다 setState((state)=> state+1)을 사용하는 것이 안전하다.