[ReactJS] useState

<script type="text/babel">
      const root = document.getElementById("root");
      function App() {
        /*React.useState()는 counter변수를 만들고, 변수의 state를 수정하고, 
        이를 일일히 render하는 과정을 손쉽게 해준다.
        [0,f]와 같이 데이터값과 해당 데이터를 수정할 수 있는 함수로 이루어져있다.
        이를 각각 counter와 setCounter라고 아래와 같이 const로 정의해줬다.
        */
        const [counter, setCounter] = React.useState(0);
        const onClick = () => {
          /* 이를 통해 counter변수를 수정하고, 리렌더링을 하는 과정을 생략하여 매우 간단히 할 수 있게 되었다.
          과거에는 counter = counter +1, render()(렌더링하는 함수)와 같이 했었다.
          즉, 간단히 말하면 state가 바뀌면 리렌더링이 일어나고, 모든 요소에 대해 바뀐 값에 대해서만 변경이 된다는 것이다.
          */
          /* setCounter(counter + 1); 이 방식과 아래의 방식은 동일하게
          현재의 state를 가지고 새로운 값을 계산해내지만 아래의 방식이 더 안전하다.
          위의 방식의 경우 어딘가에서 업데이트된게 있어서 혼동을 줄 수 있는 반면
          아래의 방식은 무조건 현재의 state를 기준으로 하기 때문이다.
          */
          setCounter((current) => current + 1);
        };
        return (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me!</button>
          </div>
        );
      }
      /* 버튼을 클릭할 때, Container 컴포넌트 전체를 리렌더링하는 것이지만,
      사실상 HTML코드에서는 변경된 숫자만 바뀐다.
      바닐라 자바스크립트에서는  h3를 통째로 바꾸겠지만 리액트는 똑똑해서 변경된 부분만 바꾸는 것이다.
      새로운 Container를 생성하는 것이 아니라 기존의 것에서 바뀐 부분만 변경하는 것이다.
      즉 리렌더링을 할 때 처음부터 끝까지 모든 요소들에 대해 리뉴얼된 새로운 값을 가지고 재생성하는 것이다.*/
      ReactDOM.render(<App />, root);
      
    </script>