단일 부모 규칙
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 3번째.
컴포넌트는 원하는 만큼 많은 JSX를 반환할 수 있지만, 한 가지 규칙이 있습니다. 모든 것은 하나의 부모 요소 안에 위치해야 합니다. 다음은 올바른 예시입니다:
return (
<div>
<h1>My Page</h1>
<p>Welcome!</p>
</div>
);하지만 감싸는 태그(wrapper) 없이 두 개의 `elements`를 나란히 `return`하는 것은 에러입니다. `function`은 오직 하나의 값만 `return`할 수 있습니다:
// BROKEN: 두 개의 최상위 요소
return (
<h1>My Page</h1>
<p>Welcome!</p>
);보통 이를 해결하려면 모든 것을 <div>로 감싸면 됩니다. 미리보기를 확인해 보세요. 규칙을 위반하면 빌드 오류가 정확한 위치를 알려줍니다.
챌린지
초급소형 페이지 헤더를 만드세요: 하나의 부모 아래 두 개의 요소(elements).
- 바깥쪽
<div>를 유지하세요. - 그 안에
id="heading"과My First App텍스트를 가진<h1>을 추가하세요. - 제목 아래에
id="tagline"과Built with React텍스트를 가진<p>를 추가하세요.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.