React 에서 input과 from을 만들었을 때 state의 작동 방법

 

1. 현재 값을 베이스로 계산을 해야하는 경우 

      const [cnt, setCnt] = React.useState(0);
      const onClick = () => {
        setCnt(cnt + 1);

위 코드의 경우 오류가 발생할 확률이 높다.

그래서 아래와 같이 setCnt에서 함수를 넣어 사용 할 수 있다.

      const [cnt, setCnt] = React.useState(0);
      const onClick = () => {
        serCnt((current) => current + 1);
      };

첫 번째 argument는 현재 값, 이 함수의 리턴 값이 새로운 값이 된다.

이 방법이 더 안전한 이유는 current가 확실히 현재 값(우리가 계산할 값)임을 보장하고 있기 때문이다.

그러면 예상치 못한 Update가 발생해도 혼선을 방지 해 준다.

예를들어서 1번과 같은 방식은 비동기적이라서 Rerendering을 할 때 한번에 값을 모아서 갱신하기 때문에 디버깅이 어려워진다.

 

즉, 1번과 같은 직접할당은 현재 state랑 관련이 없는 새로운 값을 새로운 state로 하고 싶을 때,

2번과 같은 함수를 항당하는 경우는 state에 변화를 주어서 새로운 state를 주고 싶은 경우에 사용하면 된다.