바인딩 — bind:로 양방향 데이터 흐름 만들기

<script>
  let name = $state('');
  let email = $state('');
</script>

<!-- bind:value로 양방향 바인딩 -->
<input bind:value={name} placeholder="이름" />
<input type="email" bind:value={email} placeholder="이메일" />

<p>이름: {name}, 이메일: {email}</p>

// React — value + onChange 세트 필수
const [name, setName] = useState('');
<input value={name} onChange={(e) => setName(e.target.value)} />

<!-- Svelte — bind:value 한 줄 -->
<input bind:value={name} />

<script>
  let age = $state(0);
  let price = $state(0);
</script>

<!-- type="number"면 자동으로 숫자 타입 유지 -->
<input type="number" bind:value={age} min="0" max="150" />
<input type="range" bind:value={price} min="0" max="100000" step="1000" />

<p>나이: {age} (타입: {typeof age})</p>
<p>가격: {price.toLocaleString()}원</p>

<script>
  let agreed = $state(false);
  let selectedColor = $state('red');
  let selectedFruits = $state([]);
</script>

<!-- 체크박스 — bind:checked -->
<label>
  <input type="checkbox" bind:checked={agreed} />
  약관에 동의합니다
</label>

<!-- 라디오 버튼 — bind:group -->
<label><input type="radio" bind:group={selectedColor} value="red" /> 빨강</label>
<label><input type="radio" bind:group={selectedColor} value="blue" /> 파랑</label>
<label><input type="radio" bind:group={selectedColor} value="green" /> 초록</label>
<p>선택된 색상: {selectedColor}</p>

<!-- 체크박스 그룹 — bind:group으로 배열 관리 -->
<label><input type="checkbox" bind:group={selectedFruits} value="apple" /> 사과</label>
<label><input type="checkbox" bind:group={selectedFruits} value="banana" /> 바나나</label>
<label><input type="checkbox" bind:group={selectedFruits} value="grape" /> 포도</label>
<p>선택된 과일: {selectedFruits.join(', ')}</p>

<script>
  let selected = $state('');
  let multiSelected = $state([]);

  const options = [
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'py', label: 'Python' },
  ];
</script>

<!-- 단일 선택 -->
<select bind:value={selected}>
  <option value="">선택하세요</option>
  {#each options as opt}
    <option value={opt.value}>{opt.label}</option>
  {/each}
</select>

<!-- 다중 선택 -->
<select multiple bind:value={multiSelected}>
  {#each options as opt}
    <option value={opt.value}>{opt.label}</option>
  {/each}
</select>

<script>
  let content = $state('');
</script>

<textarea bind:value={content} rows="5" placeholder="내용을 입력하세요"></textarea>
<p>글자 수: {content.length}</p>

<script>
  let divWidth = $state(0);
  let divHeight = $state(0);
  let videoCurrentTime = $state(0);
</script>

<!-- 요소 크기 바인딩 (읽기 전용) -->
<div bind:clientWidth={divWidth} bind:clientHeight={divHeight}>
  이 div의 크기: {divWidth} x {divHeight}
</div>

<!-- 미디어 바인딩 -->
<video
  bind:currentTime={videoCurrentTime}
  bind:duration
  bind:paused
  src="/video.mp4"
/>

<script>
  let inputEl = $state(null);
  let canvasEl = $state(null);

  $effect(() => {
    // DOM이 마운트된 후 실행
    if (inputEl) {
      inputEl.focus();
    }
  });

  $effect(() => {
    if (canvasEl) {
      const ctx = canvasEl.getContext('2d');
      ctx.fillStyle = '#ff3e00';
      ctx.fillRect(10, 10, 100, 100);
    }
  });
</script>

<input bind:this={inputEl} placeholder="자동 포커스" />
<canvas bind:this={canvasEl} width="200" height="200"></canvas>

<!-- Counter.svelte -->
<script>
  let { count = $bindable(0) } = $props();
</script>

<button onclick={() => count++}>{count}</button>

<!-- App.svelte -->
<script>
  import Counter from './Counter.svelte';
  let value = $state(0);
</script>

<!-- 컴포넌트 props에 양방향 바인딩 -->
<Counter bind:count={value} />
<p>부모에서 본 값: {value}</p>

<script>
  let form = $state({
    username: '',
    email: '',
    password: '',
    agreed: false,
    role: 'user',
  });

  let isValid = $derived(
    form.username.length >= 3 &&
    form.email.includes('@') &&
    form.password.length >= 8 &&
    form.agreed
  );

  function handleSubmit(e) {
    e.preventDefault();
    if (!isValid) return;
    console.log('제출:', form);
  }
</script>

<form onsubmit={handleSubmit}>
  <input bind:value={form.username} placeholder="사용자명 (3자 이상)" />
  <input type="email" bind:value={form.email} placeholder="이메일" />
  <input type="password" bind:value={form.password} placeholder="비밀번호 (8자 이상)" />

  <select bind:value={form.role}>
    <option value="user">일반 사용자</option>
    <option value="admin">관리자</option>
  </select>

  <label>
    <input type="checkbox" bind:checked={form.agreed} />
    이용약관 동의
  </label>

  <button type="submit" disabled={!isValid}>가입하기</button>
</form>