Vue · 01 반응성과 템플릿
단계: 반응형 데이터와 템플릿 · 편집 가능한 예제 · 저장 ID: vue-01
목표와 학습 후 역량
- 토글 한 번에 완료 수가 1 증가한다.
- 필터 해제 뒤 원본 카드 3개가 유지된다.
선수 지식
JavaScript 객체·배열·함수, HTML 폼, npm 프로젝트 실행.
핵심 개념과 설명
ref
ref는 반응형 값을 감싸며 스크립트에서는 .value로 읽고 씁니다. 템플릿에서는 최상위 ref를 자동으로 풀어 표시합니다.
computed
computed는 읽은 반응형 값에서 결과를 계산합니다. 완료 수처럼 원본에서 구할 값은 별도 ref에 복사하지 않습니다.
실습 준비
별도 Vue Vite 프로젝트에서 .vue SFC와 script setup을 사용합니다. 패키지 버전과 lockfile을 기록하고 개발 서버에서 실행하세요. 내장 Vue 예제는 h 함수 기반이며 범용 SFC 컴파일러가 아닙니다. 기존 vue-01 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 Vue Vite 프로젝트 src/App.vue의 script setup에 카드 3개 ref를 만드세요.
- computed로 완료 수와 미완료 목록을 만들고 템플릿에 표시하세요.
- 완료 버튼을 연결하고 목록·합계가 함께 바뀌는 과정을 notes/day01.md에 적으세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 완료 카드 | 0개 | 1개 | 완료 수는 1이고 미완료 목록은 2개다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 토글 한 번에 완료 수가 1 증가한다.
- 필터 해제 뒤 원본 카드 3개가 유지된다.
자가 점검
- 스크립트와 템플릿에서 ref 접근이 왜 다른가요?
- 완료 수를 watch로 복사하면 어떤 비용이 생기나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.