Props 전달하기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 17번째.
prop을처음부터 끝까지 연결해 봅시다. 항상 동일한 세 단계 과정입니다:
// 1. 그것을 받다
function Greeting({ name }) {
// 2. 그것을 사용하다
return <p>Hello, {name}!</p>;
}
// 3. 그것을 전달하다
<Greeting name="Ada" />문자열은 따옴표로 전달됩니다. 숫자와 표현식은 중괄호를 사용하며, 이는 속성과 동일한 규칙입니다:
<Score points={97} />
챌린지
초급Greeting 컴포넌트는 전달된 모든 것을 무시합니다.
Greeting이nameprop을 받아서 단락에Hello, {name}!을 렌더링하도록 하세요.- App에서
name="Ada"를 전달하여 페이지에Hello, Ada!가 표시되도록 하세요.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.