카운트 버튼 만들기

기본 화면에서 +1 버튼을 누르면 0이 1씩 증가하고 -1버튼을 누르면 1씩 감소한다.

import React, {useState} from "react";

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

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

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

  return (
    <div>
      <div>{count}</div>
      <button onClick={onClickHandler1}>+1</button>
      <button onClick={onClickHandler2}>-1</button>
    </div>
  );
};

export default App;

처음에 +1버튼을 누르면 이렇게 누른 숫자만큼 +1이 계로 나와야 하는데 옆으로 나왔다

-1버튼을 누르면 이런식으로 누른 숫자만큼 뒤에서부터 -1이 됐다

왜그런가 코드를 보니까 아래 부분에서 useState("0")으로 입력을 했는데 useState(0)으로 수정하니 내가 생각했던 것 처럼 카운트 버튼이 정상 실행됐다.

[수정전 코드]
function App() {
const [count, setCount] = useState("0");

[수정후 코드]
function App() {
const [count, setCount] = useState(0);