[React] 3-2. setState 알아보기 (2)

📌 setState를 이용하여 counter 구현해보기(지난 시간에 이어서)

⭐ useState

지난 시간에 이어서 modifier(데이터를 제어하는 함수) 함수가 필요한 이유를 알아볼 것이다.

App 컴포넌트를 다음과 같이 수정하여 알아보자.

. . . . .
const App = () => {
  let [counter, modifier] = React.useState(0);
  const onClick = () => {
    counter = counter + 1;
    console.log(counter);
  };
  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};
. . . . .

console 창에서 확인해 보면 버튼 클릭 때마다 counter 값이 1씩 증가하면서 결과가 표시되는 것을 볼 수 있다.

그런데 화면에 렌더링되지 않는다. 그럴 때는 render 함수를 위 onClick 함수 내에 다시 작성하여 해결하였는데 그렇게 하여 버튼 클릭 시마다 render 함수를 호출하는 것은 그다지 좋은 방법은 아니다.

getElementById, ReactDOM의 import, 최상위 컴포넌트의 import가 반복적으로 일어나기 때문이다.

따라서 다음과 같이 modifier function에 값을 부여하여 해결해 볼 것이다.

modifier 함수에 어떤 값을 인자로 부여하든 데이터를 그 값으로 업데이트하고 리렌더링을 일으킬 것이다.

지난 시간에 우리가 직접 했던 counter를 증가시키고 화면에 render 하는 작업이 modifier 내에서 다 일어난다.

즉, React.useState 함수는 counter 같은 데이터를 숫자형 데이터로 건네주고, 그 데이터 값을 바꿀 수 있는 함수도 함께 제공한다. 그리고 그 함수로 데이터를 바꾸었을 때, 데이터 값이 바뀌고, 컴포넌트도 동시에 리렌더링 (return 안에 있는 부분이) 된다.

* 일반적으로 데이터의 이름은 원하는 대로 붙이고, 데이터를 변경하는 함수명은 'set + 데이터명'으로 정한다.

코드를 수정하면 다음과 같이 된다.

<script type="text/babel">
  const root = document.getElementById("root");
  const App = () => {
    const [counter, setCounter] = React.useState(0); // 주목!
    // * object를 const로 지정했을 때는 object의 값이 아닌 주소를 지정한 것이므로 그 형태 안의 값은 바뀌는 것이 가능함. (배열은 곧 객체이므로)
    const onClick = () => {
      // 주목!
      setCounter(counter + 1); // 주목! 데이터(counter)를 +1 한 값으로 변경한다.
    };
    return (
      // 사용자가 보게 될 컴포넌트는 return 부분이다.
      <div>
        <h3>Total clicks: {counter}</h3>     <!--counter 주목!-->
        <button onClick={onClick}>Click me</button>
      </div>
    );
  };
  ReactDOM.render(<App />, root);
</script>

이제 React.js는 오로지 바뀐 부분만을 업데이트한다.

즉, 업데이트 사이사이마다 정확히 어떤 것이 업데이트됐는지 파악해서 HTML에서 그 부분만 고치는 것이다.