React 컴포넌트에 다른 컴포넌트 담기

props.children

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이다.
컴포넌트 내에 자식 컴포넌트나 html 엘리먼트를 담을 수 있다.

// Category 컴포넌트

const Category = ({ children }) => {
  return <ul>{children}</ul>;
};

// App 컴포넌트
// Category 컴포넌트 안에 html 엘리먼트 담기

const App = () => (
  <Category>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Another item.</li>
  </Category>
);

or

// App 컴포넌트
// Category 컴포넌트 안에 다른 컴포넌트 담기

const App = () => (
  <Category>
    <Box />
  </Category>
);