220524 react

#3 STATE

#3.0 Understanding State

const root = document.getElementById("root");
    let counter = 0;
    function countUp(){
      counter = counter + 1;
      ReactDOM.render(<Container/>, root); //rerender
    }
    const Container = () => ( 
      <div>
        <h3>Total clicks: {counter}</h3> //컴포넌트나 JSX에 변수추가
        <button onClick={countUp}>Click me</button>
      </div>
    );
    ReactDOM.render(<Container/>, root);

---

#3.1 setState part One

const [counter, modifier] = React.useState(0); // counter: state, modifier: 함수

---

#3.2 setState part Two

modifier함수는 어떤 값을 부여하던 그 값으로 업데이트하고 리렌더링을 일으킨다.

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>
      )
    }