[react] State란

state란 값이 바뀔 데이터가 저장되는 곳이다.
데이터가 바뀔 때마다 새로운 정보를 가지고 컴포넌트를 리렌더링 해줘야 하는데 이를 도와주는 함수가 바로 React.useState() 이다.

React.useState()가 제공하는 배열이 있는데

[undefined, f]

이 배열의 첫 번째 값은 현재 데이터 값을 의미하고
두 번째 값은 그 데이터를 바꿀 때 사용하는 함수를 의미한다.

이 배열의 요소를 꺼내서 변수에 저장하면 다음과 같다.

const [state, setState] = React.useState(default value);

여기서 setState를 modifier이라고 한다. 이 함수에 어떤 값을 부여하던 state를 그 값으로 업데이트하고 자동으로 리렌더링을 일으킨다.

즉, modifier 함수를 이용해서 컴포넌트의 state를 바꿀 때 컴포넌트는 새로운 값을 가지고 다시 한번 렌더링 되는 것이다. state가 바뀌면 전체 컴포넌트에 리렌더링이 일어난다. 다만 리액트는 똑똑하기 때문에 컴포넌트가 리렌더링 되더라도 UI에서 바뀐 부분만 업데이트 해준다.

이를 통해 counter예제를 만들어 볼 수 있다.

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

state를 바꾸는 방법은 2가지가 있는데
먼저 첫 번째는 setCounter 함수에 직접 값을 설정해주는 것이다.
두 번째는 위 예시처럼 현재의 state를 가지고 새로운 값을 계산해야 할 때 setCounter에 함수를 전달하는 방법이다.

setCounter((current) => current + 1);

이 함수의 첫 번째 argument는 현재 값이고 이 함수의 return 값이 새로운 state가 된다. 이렇게 함수에 넣는 이유는 우리가 정확히 원하는 값으로 계산할 수 있도록(다른 곳에서 침범하지 못 하도록) 리액트가 이 current가 현재 값이라는 것을 보장해주기 때문이다.