컴포넌트 재사용하기

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

컴포넌트의 진가가 바로 여기서 드러납니다. **원하는 만큼 여러 번** 사용할 수 있습니다. 아래의 각 <Star />는 독립된 새 복사본입니다:

function Star() {
    return <span>★</span>;
}

export default function App() {
    return (
        <div>
            <Star />
            <Star />
            <Star />
        </div>
    );
}

화면에 별 3개가 보이지만, 코드에서의 정의는 하나입니다. 정의를 한 번 변경하면 모든 복사본이 업데이트됩니다. 이것이 바로 HTML에는 없었던 재사용의 슈퍼파워입니다.

챌린지

쉬움

별점 3점 평가를 만드세요.

<span>★</span>를 반환하는 Star 컴포넌트를 정의하세요.
기존의 <div id="stars"> 내부에서, 해당 컴포넌트를 세 번 사용하여 세 개의 별을 render하세요.

직접 해보기

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