3.4.5 children

리액트에서 컴포넌트는 기본적으로 빈 태그 형태(<컴포넌트 />)로 사용합니다. 그런데 컴포넌트를 시작 태그와 종료 태그를 함께 사용하는 형태(<컴포넌트>내용</컴포넌트>)로도 사용할 수 있습니다. 이러한 형태를 사용하면 컴포넌트 안에 포함된 내용을 특별한 props 속성으로 취급합니다. 리액트에서는 이를 children이라고 합니다.

예를 들어, User 컴포넌트를 시작 태그와 종료 태그 사이에 내용을 포함하는 방식으로 사용할 수 있습니다.

src/App.tsx

import User from './components/User';

export default function App() {

  return (
    <>
      <User>
        <p>James</p>
        <p>20</p>
        <p>male</p>
      </User>
    </>
  );

}