왜 필요한가

독자가 책과 글을 저장하는 읽기 목록을 만든다고 가정해 봅시다. 문구와 개수가 일치해야 합니다. 제작팀은 표시를 하나씩 고치기보다 HTML과 비슷한 템플릿을 반응형 상태에 묶으려 합니다.

어떻게 해결하는가

읽을거리 목록 카드 2개가 미저장 상태로 시작합니다. 도서관 책 저장을 누르면 해당 카드만 저장됨으로 바뀌고 정원 가꾸기 글은 그대로입니다. 정원 가꾸기 글도 저장하면 총수가 1에서 2가 됩니다. 같은 카드를 다시 저장해도 총수는 2입니다. 도식은 반응형 상태와 템플릿을 연결합니다. 초기화·새로고침은 두 카드를 지웁니다. 영속 저장은 제공하지 않습니다.

Vue: 개념 시뮬레이션

개념 시뮬레이션

Vue

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

01 · 로직: 반응형 상태

도서관 책: 0 · 정원 가꾸기 글: 0

02 · 템플릿: 상태 연결

도서관 책

읽을거리 목록

정원 가꾸기 글

읽을거리 목록

03 · 스타일: 카드 표현

작성 파일 하나. 배포 파일 구성은 별개입니다.

저장 개수: 0 / 2

대기

실행 경계
브라우저 모형: 클릭 후 카드 상태·공유 기록이 템플릿을 갱신합니다.
상태와 책임
한 기록 집합이 개수의 원본입니다. 새로고침하면 지웁니다. 실제 저장에는 서비스가 필요하며 Vue 자체는 로드하지 않습니다.

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

무엇이라 부르는가

Vue는 템플릿을 반응형 상태에 연결합니다. 단일 파일 컴포넌트는 로직·템플릿·스타일을 함께 작성하는 형식이며, 네트워크 파일 하나를 보장하지는 않습니다.

공유 상태 소유권과 외부 저장은 별도로 정하세요.

출처