왜 필요한가

대화형 요소의 상태와 화면을 함께 갱신해야 합니다. DOM을 따로 수정하면 데이터와 표시의 관계가 여기저기 흩어집니다.

어떻게 해결하는가

현장 노트 카드 2개가 미저장 상태로 시작합니다. A17 저장을 누르면 해당 카드만 저장됨으로 바뀌고 B04는 그대로입니다. B04도 저장하면 총수가 1에서 2가 됩니다. 같은 ID를 다시 저장해도 총수는 2입니다. 도식은 컴파일과 실행 중 갱신을 구분합니다. 초기화·새로고침은 두 카드를 지웁니다. 영속 저장은 제공하지 않습니다.

Svelte: 개념 시뮬레이션

개념 시뮬레이션

Svelte

각 카드를 저장하세요. ID마다 한 번만 집계하며 다른 카드 상태는 유지됩니다.

01 · 빌드: 컴포넌트 컴파일

HTML + CSS + JavaScript → 브라우저 코드

02 · 브라우저 실행: 이후 클릭

A17

현장 노트

B04

현장 노트

이벤트 → 실행 중 상태 → 컴파일된 갱신

저장 개수: 0 / 2

A17: 0 · B04: 0

대기

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

Svelte는 선언적 컴포넌트를 브라우저 코드로 컴파일합니다. UI를 준비한 뒤에도 클릭에 따른 상태 갱신은 실행 중 일어납니다. SvelteKit은 더 넓은 앱 범위를 다룹니다.

라우팅과 영속 저장은 별도로 선택하세요.

출처