[React] 실습 1회차 - Counter 구현하기

⚡️ Counter 만들어 보기

• +, - 버튼 생성 후 + 버튼을 누를 시 +1을 -버튼을 누를 시 -1이 되도록 Counter 컴포넌트 구현해보기
• App.js

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import Counter from "./pages/Counter";


function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home</Link> / 
        <Link to="/counter">Counter</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/counter" element={<Counter />}></Route>
      </Routes>
    </div>
  );
}

export default App;

• Counter.js

import React, { useState } from "react";

const Counter = () => {
  const [num, setNumber] = useState(0);

  const increase = () => {
    return setNumber(num + 1);
  };

  const decrease = () => {
    return setNumber(num - 1);
  };
  return (
    <div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <p>{num}</p>
    </div>
  );
};

export default Counter;

 

 

⚡️ 결 과