인프런 커뮤니티 질문&답변

Counter.js의 defaultProps를 설정했는데도 count 값이 0으로 설정되지 않아 질문드립니다.

각각 App.js랑 Counter.js 입니다.

// import logo from './logo.svg';
// import "./App.css"; // inline 스타일 적용 시 필요 없음
import MyHeader from "./MyHeader";
import MyFooter from "./MyFooter";
import Counter from "./Counter";

function App() {
  let name = "김학준";

  const style = {
    App: {
      backgroundColor: "black", // Camel case
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "green",
    },
  };

  const counterProps = {
    a: 1,
    b: 2,
  };

  return (
    // <div className="App">
    // <div style={style.App}>
    <div>
      <MyHeader />
      <Counter {...counterProps} />
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
      {/* <h2>안녕 리액트 {name}</h2> */}
      {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */}
      {/* <b id="bold_text">React.js</b> */}
      {/* <b style={style.bold_text}>React.js</b> */}
      {/* <MyFooter /> */}
    </div>
  );
}

export default App;

import React, { useState } from "react"; // React의 메소드

const Counter = ({ initialValue }) => {
  // console.log("counter 호출!");
  console.log(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;