react로 카운터 만들기

React로 카운터 만들기

컴포넌트 생성

Counter.jsx 컴포넌트 생성

//Counter.jsx
import React from "react";

const Counter = () => {
  return (
    <>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </>
  );
};

export default Counter;

App.js에 import

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

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

export default App;

useState로 상태 관리 및 기능 구현

Counter.jsx

useState를 이용해 count라는 state와 setCounter라는 setState 함수를 생성
h1 태그 안에 count state를 넣어서 count 값의 변화를 렌더링

//Counter.jsx
import React, { useState } from "react";

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

  const onIncrease = () => {
    setCount(prevCount => prevCount + 1);
  };
  const onDecrease = () => {
    setCount(prevCount => prevCount - 1);
  };
  return (
    <>
      <h1>{count}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </>
  );
};

export default Counter;