컴포넌트 합성 - 레고처럼 조립하기
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 컴포넌트 합성(Composition)에 대한 설명으로 옳지 않은 것은?
💡 합성은 함수형 컴포넌트와 클래스 컴포넌트 모두에서 사용할 수 있으며, 현재 React에서는 함수형 컴포넌트 + 합성 패턴이 표준입니다. 클래스 컴포넌트를 반드시 사용할 필요가 없습니다.
Q2. 다음 코드에서 children Props로 전달되는 것은 무엇인가?
<Card title="제목"><p>안녕하세요</p><button>클릭</button></Card>
💡 컴포넌트 태그 사이에 작성된 JSX (<p>안녕하세요</p>와 <button>클릭</button>)가 children Props로 전달됩니다. title은 일반 Props로 별도로 전달됩니다.
Q3. 특수화(Specialization) 패턴을 올바르게 설명한 것은?
💡 특수화 패턴은 범용적인 Dialog 컴포넌트로 ConfirmDialog, WelcomeDialog 같은 특수 목적 컴포넌트를 만드는 것처럼, 일반적인 컴포넌트를 구체적인 사용 사례에 맞게 래핑하는 방법입니다.
Q4. 다음 중 여러 '슬롯(Slot)'을 가진 레이아웃 컴포넌트를 만들 때 올바른 방법은?
💡 여러 슬롯이 필요할 때는 각각 별도의 Props로 받습니다. header, sidebar, main, footer 처럼 각 영역을 Props로 정의하면 호출 시 각 슬롯에 원하는 JSX를 전달할 수 있습니다. (Vue의 <slot>과 달리 React는 Props로 구현합니다.)
Q5. 컴포넌트 합성에서 단일 책임 원칙(Single Responsibility Principle)이란?
💡 단일 책임 원칙은 각 컴포넌트가 한 가지 역할만 담당하도록 설계하는 원칙입니다. 예를 들어 Avatar는 아바타 이미지만, Badge는 뱃지만, UserCard는 이 둘을 조합한 카드만 담당합니다. 이렇게 하면 유지보수와 테스트가 쉬워집니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.