두 개의 Props

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

컴포넌트는 일반적으로 여러 props를 전달받습니다. 구조 분해 할당(destructuring) 목록에 모두 나열하고 JSX에 섞어서 사용하세요:

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

타입에 주의하세요: name은 문자열(큰따옴표)이고, price는 숫자(중괄호)입니다. 숫자로 계산을 수행하는 순간 숫자를 숫자로 유지하는 것이 중요해집니다.

챌린지

쉬움

상점을 위한 제품 목록을 작성하세요.

Product가 name과 price props를 전달받아 단락에 {name} costs ${price}를 렌더링하도록 만드세요.
App에서 name은 Laptop, price는 999(숫자 타입으로!)를 가진 Product 하나를 렌더링하세요. 페이지에 Laptop costs $999가 표시되어야 합니다.

직접 해보기

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