같은 컴포넌트, 새로운 데이터
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 19번째.
재사용성과 props를 결합하면 구체적인 패턴이 완성됩니다: 하나의 컴포넌트를 서로 다른 데이터로 여러 번 렌더링하기.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />세 개의 `badge`, 세 개의 `label`, 하나의 정의. 웹에서 지금까지 본 모든 목록, 메뉴, 피드 및 갤러리는 모두 이 패턴입니다(나중에는 배열을 통해 복사본을 생성하기도 할 것입니다).
챌린지
쉬움상점의 프로모션 배지를 전달하세요.
Badge가labelprop을 전달받아<span>내부에 렌더링하도록 만드세요.<div id="badges">내부에 두 개의 배지를 렌더링하세요: 첫 번째는New라벨, 그 다음은Sale라벨을 사용합니다.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.