[REACT] 전구 끄고 켜기 및 카운터 모듈화

import { useState } from "react";

const Bulb = () => {
  const [light, setLight] = useState("OFF");
  console.log(light);
  return (
    <div>
      {light === "ON" ? (
        <h1 style={{ backgroundColor: "orange" }}>ON</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
      )}
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        {light === "ON" ? "끄기" : "켜기"}
      </button>
    </div>
  );
};

export default Bulb;

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
    </div>
  );
};
export default Counter;

import "./App.css";
//리액트 내부에서 제공하는 함수 useState
import { useState } from "react";

import Counter from "./components/Counter";
import Bulb from "./components/Bulb";

const App = () => {
  return (
    <>
      <Bulb />
      <Counter />
    </>
  );
};

export default App;