Menu
Coddy logo textTech

요약: Props

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

challenge icon

챌린지

쉬움

챕터 요약: 프롭스(props)와 children으로 만든 작은 메뉴입니다.

  1. Itemnameprice 프롭스를 받아서 <li> 안에 {name}: ${price}를 렌더링하도록 만드세요.
  2. Cardchildren을 표시하는 className="card"를 가진 <div>를 렌더링하도록 만드세요.
  3. App에서 <Card>...</Card>를 사용하여 <ul id="menu">를 감싸고, 그 안에서 **두 개**의 Item을 렌더링하세요: name은 Tea이고 price는 3, 그다음 name은 Cake이고 price는 5입니다 (price는 숫자로 전달하세요!).

직접 해보기

<!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>

기초 (Fundamentals)의 모든 레슨