📁 Counter.js

import React, { useState } from "react";

const Counter = () => {
  // 0에서 출발 = useState(0)
  // 1씩 증가
  // 1씩 감소
  // count 상태

  console.log("count 호출");

  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  const [count2, setCount2] = useState(0);

  const onIncrease2 = () => {
    setCount2(count2 + 3);
  };
  const onDecrease2 = () => {
    setCount2(count - 3);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>

      <h2>{count2}</h2>
      <button onClick={onIncrease2}>+</button>
      <button onClick={onDecrease2}>-</button>
    </div>
  );
};

export default Counter;

📁 App.js

import React from "react";
import Counter from "./Counter";
// import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  const number = 6;

  return (
    <div>
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

100 usStateを使用してステータスを作成する場合は、count名を使用してステータスの値をロードできます.setCountというステータスを使用してステータスを更新できます.初期値はusState()カッコ内に配置されます.
100 AppコンポーネントがCounterコンポーネントを呼び出し、戻ってきたhtmlを画面に表示するため、Counterコンポーネントは再び戻る
=スクリーンの再描画
= rerender
👉 素子自身の状態が変化した場合は、画面を再描画してrenderを行います
=関数が再呼び出されます
👍 state短いコードと柔軟な構文を使用すると、画面上のデータの置き換えと更新が容易になります.
=ユーザーがボタンをクリックするなど、動的に変更できるWebサイトを作成できます.