왜 필요한가

여행자가 버스와 등산 카드를 저장하는 계획 앱을 만든다고 가정해 봅시다. 문구와 합계가 함께 갱신돼야 합니다. 제작팀은 갱신 코드를 많이 쓰지 않고 선언형 컴포넌트를 미리 컴파일하려 합니다.

어떻게 해결하는가

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

Svelte: 개념 시뮬레이션

개념 시뮬레이션

Svelte

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

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

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

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

버스 시간표

여행 계획

등산 경로

여행 계획

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

저장 개수: 0 / 2

버스 시간표: 0 · 등산 경로: 0

대기

실행 경계
모형: 컴포넌트는 미리 컴파일하지만 이후 브라우저 이벤트도 실행 중 상태를 바꿉니다.
상태와 책임
공유 기록이 새로고침 전까지 합계를 소유합니다. 설명 모형은 Svelte 런타임을 로드하지 않습니다.

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

무엇이라 부르는가

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

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

출처