$$props와 $$restProps로 속성 전달하기
모든 속성 또는 남은 속성을 내부 요소나 컴포넌트로 전달합니다.
$$props와 $$restProps로 속성 전달하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
프롭을 전달하는 이유
래퍼 컴포넌트는 전달받은 모든 프롭을 내부 요소에 넘겨야 하는 경우가 많습니다. 전달 기능을 사용하면 모든 속성을 일일이 나열하지 않아도 됩니다.
$$props 객체
컴포넌트 내부에서 $$props는 컴포넌트에 전달된 모든 프롭을 포함하는 객체입니다.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />선언하지 않은 프롭 포함하기
export let으로 선언하지 않은 프롭도 $$props에 포함됩니다.
$$restProps 객체
$$restProps는 export let으로 명시적으로 선언한 프롭을 제외합니다. 추가 프롭만 전달할 때 유용합니다.
<script>
export let label;
</script>
<input {...$$restProps} />일반적인 패턴
필요한 프롭을 선언하고 나머지는 래핑된 요소에 전달합니다.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />주의할 점: 순서가 중요합니다
먼저 펼친 다음, 필요하면 특정 속성으로 덮어씁니다.
<input {...$$restProps} type="email" />class 전달하기
테마를 유연하게 적용할 수 있도록 $$restProps를 통해 class 속성을 전달합니다.
style 전달하기
style 속성과 모든 data-* 속성도 자연스럽게 전달됩니다.
이벤트 처리기
부모가 전달한 이벤트 리스너는 함수로서 $$props에 저장됩니다. 펼치기를 사용하면 이 리스너도 함께 전달됩니다.
반응성의 제약
Svelte는 $$props와 $$restProps를 정적으로 추적할 수 없으므로 선언된 프롭보다 약간 덜 효율적입니다.
TypeScript 주의사항
두 객체 모두 기본적으로 타입이 느슨합니다. 타입 안전성을 확보해 전달하려면 TS에서 타입 변환을 하거나 타입을 보강합니다.
빠른 확인
$$restProps란 무엇인가요?
복습
내부 요소에서 펼치기를 사용해 $$props(모든 프롭) 또는 $$restProps(추가 프롭만)로 프롭을 전달합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“$$props와 $$restProps로 속성 전달하기” 강의는 무료인가요?
네 — “$$props와 $$restProps로 속성 전달하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“$$props와 $$restProps로 속성 전달하기”에서 뭘 배우나요?
모든 속성 또는 남은 속성을 내부 요소나 컴포넌트로 전달합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“$$props와 $$restProps로 속성 전달하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- export let으로 속성 선언하기
- 부모에서 속성 전달하기
- 기본 속성 값
- $$props와 $$restProps로 속성 전달하기