📁 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;