React : useState로 component re-rendering

• 위와 같이 클릭버튼을 누르면 카운팅되는 페이지가 있다.

VanillaJS

리액트를 사용하지 않고 바닐라JS로 구현을 한다 하고 아래 처럼 구현했다고 하자.

  <script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter++;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>

위 처럼 작성하게 되면 counter가 변경될 때마다 span 태그 부분 전체가 매번 다시 호출되어 적용된다. 물론 이를 방지해서 코드를 짤 수 있지만 일단 그런 특징을 가지고 있다.

React

React를 사용하면 마지막에 변경된 부분만을 감지(?)해서 그 컴포넌트만 업데이트한다.

non state

  <script type="text/babel">
    let counter = 0;

    function countUp() {
      counter += 1;
      render();
    }

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

    function render() {
      ReactDOM.render(<Container />, root);
    }
    render();
  </script>

ReactDOM.render(<Container />, root);

• 그런데 이런 식으로 버튼을 클릭할 때 마다 DOM을 매번 호출하는 방식은 좋지 않고 state를 사용하면 이를 해결할 수 있다.

• state는 컴포넌트 내부에서 선언해 내부에서 수정 및 작업이 가능한 동적 데이터 형태이다.

useState

  <script type="text/babel">
    function 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);
  </script>

다양한 방법이 있겠지만 React Hook의 userState를 이용하여 구현할 수 있다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공하는데 이를 통해 (counter + 1 ) 더 효율적으로 짤 수 있다.

JS와 React의 차이?, props와 state, React Hook에 대해서 다시 제대로 다뤄야겠다.

React Hook 주소