Svelte 반응형 블록이 입력값을 계속 초기화하던 문제 해결

🤖 488 in / 615 out / 1103 total tokens

RecordModal에서 시간 입력값이 수정되지 않던 버그를 고쳤다.

원인은 reactive 블록의 과도한 반응이었다. $records가 변경될 때마다 입력 필드들이 초기화되어, 사용자가 타이핑하는 값을 덮어써버렸다. Svelte의 $: 반응문은 의존하는 모든 값이 바뀔 때 실행되니까 당연한 결과였다.

해결책은 간단했다. initKey 변수를 하나 두어 모달이 열릴 때 한 번만 초기화하도록 가드를 추가했다. 날짜가 바뀌지 않으면 재초기화하지 않는 방식이다.

let initKey = '';
$: if (open && date && `${date}` !== initKey) {
  initKey = date;
  const r = $records[date];
  checkIn = r?.checkIn || '08:00';
  checkOut = r?.checkOut || '18:00';
  mealExpense = r?.mealExpense || 0;
  memo = r?.memo || '';
}

이제 입력값이 의도한 대로 동작한다. 반응형은 양날의 검이다.