Props - 컴포넌트에 데이터 전달하기
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 Props에 대한 설명으로 옳은 것은?
💡 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. Props는 읽기 전용(불변)이므로 자식에서 직접 변경할 수 없습니다.
Q2. 다음 코드에서 Button 컴포넌트가 받는 Props를 올바르게 구조 분해 할당한 것은?
<Button text="클릭" color="blue" size={16} />
💡 Props 객체를 구조 분해 할당할 때는 중괄호 {}를 사용합니다. function Button({ text, color, size }) 형태로 받으면 props.text, props.color, props.size 대신 바로 변수명으로 사용할 수 있습니다.
Q3. Props 기본값을 설정하는 올바른 방법은?
💡 구조 분해 할당에서 = 기호로 기본값을 설정합니다. function Card({ title = '기본제목' }) 형태로 작성하면 title Props가 전달되지 않았을 때 '기본제목'이 사용됩니다.
Q4. children Props에 대한 설명으로 옳은 것은?
💡 <Card>여기에 작성한 내용</Card>에서 태그 사이의 JSX가 자동으로 children Props로 전달됩니다. children은 문자열, 숫자, JSX 엘리먼트 등 어떤 타입이든 받을 수 있습니다.
Q5. 다음 중 숫자 타입의 Props를 올바르게 전달하는 방법은?
💡 문자열 이외의 값(숫자, 불리언, 객체, 배열, 함수 등)은 중괄호 {}로 감싸서 전달합니다. 따옴표를 사용하면 숫자가 아닌 문자열 '35000'이 전달됩니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.