Children Prop

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 20번째.

한 가지 특별한 prop이 있습니다. 여는 태그와 닫는 태그를 함께 사용하여 컴포넌트를 작성하면, 그 사이에 중첩된 모든 내용이 children prop으로 전달됩니다:

function Card({ children }) {
    return <div className="card">{children}</div>;
}

<Card>
    <p>Any content!</p>
</Card>

Card는 내부 내용을 알거나 신경 쓰지 않으며, 그저 스타일이 적용된 상자로 감쌀 뿐입니다. 카드, 모달, 레이아웃과 같은 래퍼는 모두 children을 사용합니다. 부모가 콘텐츠를 제공하고, 컴포넌트가 프레임을 제공합니다.

챌린지

중급

재사용 가능한 카드 프레임을 빌드하세요.

Card가 children을 표시하는 className="card"를 가진 <div>를 렌더링하도록 만드세요.
App에서 <Card>...</Card>를 사용하여 id="card-text"와 Welcome aboard 텍스트를 가진 <p>를 감싸세요.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>