setState part2

그렇다면 왜 변경하는 함수 f 가 필요할까?

이전강의에서는 리렌더링을 직접 일일이 했다.
그럴필요 없이

  function App() {
      const [counter, modifier] = React.useState(0);
      const onClick = () => {
        modifier(23232314);
      };
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }

React.useState()함수는 counter같은 데이터를 숫자형으로 넘겨주고, 그 데이터값을 바꿔줄 modifier라는 함수도 제공한다.
그 함수를 통해 데이터를 바꿔주면 데이터값이 바뀌고,
자동으로 리렌더링도 함께 이루어진다.

보통은 [데이터이름, set데이터이름] 과 같이 작명한다.

const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };

---

1. 변수 를 컴포넌트에 연결해주고

2. 변수에 데이터를 담은 후,

3. 해당 변수에 담긴 값을 바꿀 함수를 만든다.

state 가 바뀌면 리렌더링이 일어난다