• 해당 Container 컴포넌트의 자식으로 html 태그를 적으면 해당 요소들이 Container 컴포넌트의 인자로 넘어오게 된다.

import React from 'react';
// import './App.css';

import MyHeader from './MyHeader';
import Counter from './Counter';
import Container from './Container';

function App() {
  const number = 5;

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

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

export default App;

이처럼 children에는 위의 Container 자식에 있는 태그들이 들어오게 된다.

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

export default Container