[ React-hooks ] useState를 활용한 증가버튼, 감소버튼 구현하기

안녕하세요 상훈입니다.

리액트 훅에서 useState를 활용한 증가버튼, 감소버튼을 구현하도록 하겠습니다.

1. index.js 

import React, { useState } from "react";

const App = () => {

  const [item, setItem] = useState(0)
  const incrementItem = () => setItem(item + 1)
  const decrementItem = () => setItem(item - 1)

  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>

    </div>
  )

}

export default App;

 

useState() 를 이용하는건, 생각보다 단순하지만,

일일이 값을 생성하고 지정해주어야하는 번거로움이 존재한다. 

 

result