React Practice(4-2)

App.js

import './App.css';
import Counter from './Counter';
import InputSample from './InputSample';
import InputTest from './InputTest';
import Parent from './Parent';
import Say from './Say';

function App() {
  return (
    <div>
    <InputSample/><hr/>
    <InputTest/><hr/>
    <Say/><hr/>
    <Counter/><hr/>
    <Parent/>
    </div>
  );
}

export default App;

 

Counter.js

import React, {useState} from "react";
const Counter = ()=>{
    const [number,setNumber] = useState(0) 

    const onIncrease =()=>{
        setNumber(number+1)
    }
    const onDecrease =()=>{
        setNumber(number-1)
    }

    const Change = (num)=>{
        setNumber(number + num)
    }
    
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button><br/>

            <button onClick={()=>Change(1)}>1증가</button>
            <button onClick={()=>Change(-1)}>1감소</button>

        </div>
    )
}
export default Counter;