state

state를 사용하기 전 코드

    const root = document.getElementById('root');
    let cnt = 0;
    function render() {
      ReactDOM.render(<Container />, root);
    }
    function cntUp() {
      cnt = cnt + 1;
      render();
    }

    const Container = () => (
      <div>
        <h3>Total clicks : {cnt}</h3>
        <button onClick={cntUp}>Click me</button>
      </div>
    );
    render();

보다시피 render라는 함수를 만들고 cnt라는 data가 업데이트가 될때마다 render()를 호출해야 화면에 바뀐 데이터로 뿌려지게 된다. 만약 cntUp함수에서 render()를 호출하지 않으면 웹 화면에는 cnt의 초기값인 0으로만 보일 것이다.
다시 말해 state를 사용하지 않으면 render라는 함수를 만들고 그것을 각함수마다 호출해야한다는 것이다. 그래야 변화된 데이터가 출력이 된다.
계속 이런식으로 일일이 render()를 적용시키게 되면 개발자들은 번거로워진다. 그래서 ReactJS에서는 자동으로 리렌더링을 해주는 state를 제공한다.

state를 사용한 코드

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

useState를 이용해 cnt와 변화될 변수 setCnt를 선언해준다. onClick이라는 함수를 만들고 그 안에서 setCnt에 'cnt+1'이라는 기능을 부여해준다. 그리고 button에 onClick만 부여해주면 클릭할때마다 자동으로 리렌더링된 화면이 나타난다.

state값이 바뀌면 새로운 값을 가지고 컴포넌트가 리렌더링 되는 것, 이것이 state의 핵심이다!

또 중요한 것은 클릭할때마다 elements에서 변화된 데이터만 리렌더링 된다는 것이다.
javaScript의 경우 변화를 주면 div와 button같은 html이 함께 리렌더링되는데 ReactJS의 경우 오직 변화된 데이터만 리렌더링 된다. 위 gif를 보면 이해가 될 것이다!