Svelte · 08 $props와 변경 콜백
단계: 컴포넌트 계약과 Effect · 외부 실행 예제 · 미리보기 안내 · 저장 ID: svelte-step-08
목표와 학습 후 역량
- 클릭한 id의 done만 바뀐다.
- 한 번 클릭에 부모 변경 로그가 1개다.
선수 지식
8단위는 7단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
props 계약
$props로 부모가 제공한 입력을 읽습니다. 자식이 소유하지 않은 값을 임의로 변경하기보다 콜백으로 의도를 전달합니다.
콜백 입력
함수 prop은 변경 대상과 새 값을 명확히 전달할 수 있습니다. DOM 이벤트 객체 전체보다 도메인 입력을 계약으로 정합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 Svelte 5 Vite 프로젝트에서 .svelte 파일을 컴파일해 실행합니다. 패키지 버전과 lockfile을 기록하세요. Frontory의 Svelte 미리보기는 실제 writable와 명시적 DOM 어댑터이며 .svelte 컴파일러나 runes 실행기가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/Card.svelte에서 id·title·done·ontoggle을 $props로 받으세요.
- 버튼 클릭에 ontoggle(id)를 연결하세요.
- 부모가 토글을 수행하고 정렬 후에도 클릭한 id만 변경되는지 확인하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 콜백 인자 | 순번 | id | 재정렬 후에도 의도한 카드만 변경된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 클릭한 id의 done만 바뀐다.
- 한 번 클릭에 부모 변경 로그가 1개다.
자가 점검
- prop 객체 내부를 직접 수정하면 소유권 경고가 왜 생기나요?
- 콜백과 전역 저장소를 어떤 기준으로 선택하나요?
공식 참고
연결된 예제와 실행 범위
미리보기는 Svelte writable/DOM 계약 실험입니다. runes·snippet·컴파일 결과는 실제 App.svelte를 Svelte 5 프로젝트에서 실행하세요.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 폼 바인딩과 검증 · 다음: $bindable과 편집기 계약