왜 필요한가

템플릿과 바뀌는 데이터를 함께 유지해야 합니다. 표시 항목을 하나씩 수정하면 작업이 중복되고 화면이 어긋납니다.

어떻게 해결하는가

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

Vue: 개념 시뮬레이션

개념 시뮬레이션

Vue

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

01 · 로직: 반응형 상태

A17: 0 · B04: 0 → 1

02 · 템플릿: 상태 연결

A17

현장 노트

B04

현장 노트

03 · 스타일: 카드 표현

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

저장 개수: 0 / 2

A17: 0 · B04: 0

대기

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

무엇이라 부르는가

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

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

출처