반응형

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return <Counter />;
}
export default App;

Counter.js

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  };
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;
반응형

'2020 > React' 카테고리의 다른 글

React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
React 조건부 렌더링  (0) 2020.03.30
React Children  (0) 2020.03.30
첫번째 컴포넌트  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,