📁 App.js

import React from "react";
import Container from "./Container";
import Counter from "./Counter";
// import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  const number = 6;

  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
  };

  return (
    <Container>
      <div>
        <MyHeader />
        <Counter {...counterProps} />
      </div>
    </Container>
  );
}

export default App;

📁 Counter.js

import React, { useState } from "react";
import OddEvenResult from "./OddEvenResult";

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>
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

📁 OddEvenResult.js

const OddEvenResult = ({ count }) => {
  console.log(count);
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;

📁 Container.js

const Container = ({ children }) => {
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
      {children}
    </div>
  );
};

export default Container;

✔ 실행화면

👉 부모컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여서 전달하는 방식 = Props

❗ react의 컴포넌트는 본인이 관리하고 본인이 가진 state가 바뀔 때마다 rerender가 되고, 나에게 내려오는 props가 바뀔때마다 rerender가 되고,
둘다 아니여도 내 부모가 rerender가 되면 나도 rerender가 된다

❗ Container 컴포넌트에 자식으로 배치된 jsx 요소들은 Container 컴포넌트에 children이라는 prop으로 전달이 되게 된다 그래서 children에 jsx 요소들이 전달이 되었고 결론적으로 children을 값처럼 활용해서 div를 바깥에 두고 감싸서 활용이 가능