Svelte · 09 $bindable과 편집기 계약
단계: 컴포넌트 계약과 Effect · 외부 실행 예제 · 미리보기 안내 · 저장 ID: svelte-step-09
목표와 학습 후 역량
- textarea와 부모 출력 문자열이 일치한다.
- 에디터 제거 후 재표시해도 초안이 남는다.
선수 지식
9단위는 8단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
양방향 연결
$bindable은 부모가 바인딩할 수 있는 prop을 명시합니다. 모든 prop을 양방향으로 만들면 변경 경로가 흐려집니다.
편집 데이터
단위별 초안은 에디터 수명보다 오래 보관할 수 있어야 합니다. 부모가 문자열을 소유하고 편집기가 변경을 전달하도록 구성합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 Svelte 5 Vite 프로젝트에서 .svelte 파일을 컴파일해 실행합니다. 패키지 버전과 lockfile을 기록하세요. Frontory의 Svelte 미리보기는 실제 writable와 명시적 DOM 어댑터이며 .svelte 컴파일러나 runes 실행기가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/NoteEditor.svelte에서 value = $bindable('')를 선언하세요.
- textarea bind:value와 부모의 bind:value={draft}를 연결하세요.
- 같은 draft를 읽는 출력 패널을 만들고 입력·제거·재표시 결과를 확인하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 값 전달 | 일반 prop | bindable 바인딩 | 편집 입력이 부모 초안에 반영된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- textarea와 부모 출력 문자열이 일치한다.
- 에디터 제거 후 재표시해도 초안이 남는다.
자가 점검
- 양방향 연결을 허용할 prop은 무엇인가요?
- 부모가 undefined를 전달할 때 기본값과 계약을 어떻게 정하나요?
공식 참고
연결된 예제와 실행 범위
미리보기는 Svelte writable/DOM 계약 실험입니다. runes·snippet·컴파일 결과는 실제 App.svelte를 Svelte 5 프로젝트에서 실행하세요.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: $props와 변경 콜백 · 다음: snippet으로 행 표시 바꾸기