React : state Function

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

2ways state Function

state를 관리(upDate)하는 setState 함수는 직접입력하는 것을 제외하고 두 가지가 더 있다.

1.setCounter 이전 state를 이용해 current state 계산하기

    const root = document.getElementById("root");
    const App = () => {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

지금까지 사용했던 방식의 함수이다. 이 방식을 사용하게 된다면 state인 counter가 생각지도 못한 다른 곳에서 변경되어 우리가 생각한 값으로 아니게 될 수 있다. 일종의 버그이며 프로젝트 도중에 발생 할 수도 있다는 위험성이 존재한다.

2.setCounter 함수화

    const root = document.getElementById("root");
    const App = () => {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter((current) => current + 1);
        //setCounter((현재값) => 현재값 + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

setCounter가 실행될 때 첫번째 argument(전달인자)는 current(현재값)이 되며, 이 함수가 실행된 후 return값이 새로운 state가 되는 방식이다. 이 경우의 return값은 current+ 1이 된다.
이 방식을 사용하는 것이 state를 관리하는데 좀더 안전한 방식인데 current가 무조건 현재값이라는 것을 보장하기 때문이다.
즉, 현재 state를 기반으로 state를 upDate하고 싶다면 이 방식을 사용하는 것이 좋다.