컴포넌트에 데이터를 전달하는 방법 Props

//App.js
import Counter from './Counter';

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initialValue: 5,
  };

  return (
    <div className='App'>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );
}

export default App;

//Counter.js
import React,{useState} from 'react';

const Counter = ({initialValue}) => {

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

  const onIncrease = () => {
    setCount(count + 1);
  }
  const onDecrease = () => {
    setCount(count - 1);
  }


  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

Counter.defaultProps={
  initialValue:0
}
export default Counter;

defaultProps를 이용하면 전달받지 못한 값에 대한 에러를 방지 할 수 있다.