[Svelte 시리즈 5편] `bind:`와 폼 상태 관리를 함께 익혀 보자

데이터를 보여 주는 것에서 한 단계 더 나아가 사용자의 입력을 안정적으로 받아야 합니다. bind: 문법은 학생 프로젝트에서도 금방 쓰이는 양방향 연결법입니다.

이번 글에서 새로 나오는 용어

1. bind:: 입력 요소와 변수 사이를 즉시 동기화해 한쪽이 바뀌면 다른 쪽도 동시에 바뀌게 하는 Svelte 지시자입니다.
2. 양방향 바인딩: 입력값과 상태가 서로를 반영하는 구조로, 별도 이벤트 핸들링 없이 폼을 관리할 수 있습니다.
3. 폼 상태 객체: 여러 입력값을 하나의 객체로 묶어 저장·검증하기 쉽게 만든 구조입니다.
4. 로컬스토리지(LocalStorage): 브라우저에 있는 간단한 저장소로, 문자열 형태로 데이터를 보관해 새로고침 뒤에도 값을 남길 수 있습니다.

개념

양방향 바인딩은 입력값과 상태를 동시에 갱신하는 기법입니다. 입력창에 문장을 적으면 상태 객체가 같은 순간에 바뀌어야 저장이 편합니다. 폼 상태는 여러 입력 요소를 하나의 객체로 묶어 관리하는 구조입니다. 폼 상태를 정리하면 제출 시 검증과 저장을 한 번에 처리할 수 있습니다. 브라우저 저장소(LocalStorage)는 키-값으로 데이터를 잠시 보관하는 공간입니다. 바인딩된 상태를 저장소에 기록하면 새로고침 후에도 값을 복원할 수 있습니다.

코드

동아리 지원서를 자동 저장하는 작은 화면으로 바인딩 과정을 살핍니다.

<script>
  let form = JSON.parse(localStorage.getItem('application') ?? '{}');

  $: localStorage.setItem('application', JSON.stringify(form));
</script>

<input bind:value={form.teamName} placeholder="팀 이름" />
<textarea bind:value={form.goal} placeholder="해결하려는 문제" />
<label>
  <input type="checkbox" bind:checked={form.ready} /> 발표 준비 완료
</label>

bind:value와 bind:checked가 적힌 모든 입력은 form 객체의 일부를 곧장 수정합니다. $: 반응 구문이 실행되면서 상태가 바뀔 때마다 로컬스토리지에도 최신 값이 적힙니다. 따라서 노트북을 바꿔도 같은 브라우저라면 입력 내용이 그대로 남습니다.

왜 중요한가

지원서, 설문, 동아리 점검표 등 학교 프로젝트 대부분이 폼으로 이뤄집니다. bind:를 사용하면 입력 흐름을 일관되게 유지할 수 있어 이벤트 핸들러를 매번 작성할 필요가 없습니다. 또한 객체 전체를 다루므로 제출 함수가 최신 데이터를 한 번에 받습니다. 이 습관은 훗날 스토어와 서버 액션을 연결할 때도 큰 도움이 됩니다.

실습

• 따라 하기: 위 예제를 그대로 작성하고 입력값이 새로고침 후에도 유지되는지 확인한다.
• 확장하기: select나 라디오 입력을 추가해 상태 객체에 새로운 필드를 더한다.
• 디버깅: 값이 반영되지 않으면 bind:가 value·checked·group 등 알맞은 속성에 붙었는지 살핀다.
• 완료 기준: 폼을 수정하면 즉시 화면과 로컬스토리지 내용이 함께 바뀐다.

마무리

양방향 바인딩을 익히면 폼 구성과 검증이 훨씬 짧아집니다. 다음 편에서는 여러 컴포넌트가 같은 상태를 바라보게 만드는 store 개념을 이어서 살펴봅니다.