React count app

처음 사용해보는데 은근 어렵다;;

import 도 은근 귀찮음..

{} 특정 함수 호출

import { useState } from 'react';
import './Counter.css';
import CounterButton from './CounterButton'

export default function Counter() {

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

    function incrementCounterParentFunction(by) {
        setCount(count + by)
    }

    function decrementCounterParetFunction(by) {
        setCount(count - by)
    }

    function resetCounter(by) {
        setCount(count - count)
    }

    return (
        <div>
            <span className="totalCount">{count}</span>
            <CounterButton by={1} incrementMethod={incrementCounterParentFunction} decrementMethod={decrementCounterParetFunction}></CounterButton>
            <CounterButton by={3} incrementMethod={incrementCounterParentFunction} decrementMethod={decrementCounterParetFunction}></CounterButton>
            <CounterButton by={5} incrementMethod={incrementCounterParentFunction} decrementMethod={decrementCounterParetFunction}></CounterButton>
            <button className="resetButton" onClick={resetCounter}>Reset</button>
        </div>
    )
}

 

import { PropTypes } from 'prop-types'

export default function CounterButton({ by, incrementMethod, decrementMethod }) {

    // function incrementCounterFunction() {
    //     incrementMethod(by);
    // }

    // function decrementCounterFunction() {
    //     decrementMethod(by);
    // }

    return (
        <div className="Counter">

            <div>
                <button className="countButton" onClick={() => incrementMethod(by)}>+{by}</button>
                <button className="countButton" onClick={() => decrementMethod(by)}>-{by}</button>
            </div>
        </div>
    )

    //유효성검사 
    CounterButton.propType = {
        by: PropTypes.number
    }

    CounterButton.defaultProps = {
        by: 3
    }
}

import './App.css';
import Counter from './components/counter/Counter'

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  )
}

// function PlayingWithProps({property1,property2}) {
//   console.log(property1)
//   console.log(property2)

//   return (
//     <div>Props</div>
//   )
// }

// function PlayingWithProps(properties) {
//   console.log(properties)
//   console.log(properties.property1)
//   console.log(properties.property2)

//   return (
//     <div>Props</div>
//   )
// }

export default App;