[React] React Hooks (1) - useState

Hooks를 사용하여 증가, 감소 버튼 만들기

 

hooks를 사용한 예시(함수형 컴포넌트)

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  
  return (
    <div className="App">
      <h1>Hooks test {item}</h1>
      <h2>Press the button</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM render(<App />, rootElement);

 

Increment를 누르면 1 증가, Decrement 누르면 1 감소