1. v-on 이벤트 처리
`v-on` 의 핵심 개념
v-on 디렉티브는 HTML 요소에 `이벤트 리스너`를 부착하는 역할 : 순수 JavaScript의 addEventListener 와 동일한 기능을 수행.
정식 문법 : v-on:click="myFurnction"
단축 문법(Shorthand) : @click="myFunction" (실무에서는 단축 문법 사용)
특정 이벤트가 발생했을 때 methods에 정의된 함수를 호출
v-on : 메서드 호출, 이벤트 객체 전달, 이벤트 수식어 등 다양한 편의 기능 제공.
`$event` : 매서드에 특별한 변수인 $event를 인자로 전달하면, 순수 JavaScript의 `event` 객체와 동일한 이벤트 객체를 받아 사용할 수 있음.
event.preventDefault() : <form> 태그에서 제출 시 기본적인 페이지 새로고침을 막기 위해서 사용.
-> Vue에서는 .prevent 예시) @submit.prevent
`.enter` : @keyup.enter는 사용자가 키를 눌렀다 떼었을 때, 그 키가 `Enter` 키일 경우에 연결된 메서드를 실행.
2. v-bind 데이터 바인딩
`v-bind` 의 핵심 개념
콧수염 괄호 ( {{ }} ) 는 태그 사이의 텍스트 내용을 데이터와 연결할 때 사용.
반면, 이미지의 주소(src), 링크의 경로(href), 요소의 `id`나 `class` 같은 HTMl 속성(attribute) 값에 데이터를 연결하기 위해서는 v-bind를 써야 함.
v-bind는 HTML 속성을 Vue의 데이터와 동기화시켜주는 역할.
정식 문법 : v-bind:src="imageUrl"
단축 문법(Shorthand) : :src="imageUrl"
v-on 을 @ 로 줄여 쓴 것처럼, v-bind 는 콜론(:)을 사용해 줄여 씀.
기본 사용법 -> :속성이름="데이터이름" 형태, 특정 HTML 속성의 값을 데이터에 정의된 값으로 실시간 연결.
예시) disabled 같은 불리언 속성, 연결된 데이터가 `true`면 속성 추가, `false` 면 제거.
:disabled="!isAgreed" 는 " isAgreed 가 `false`일 때 `disabled`를 `true`로 만들어라"는 뜻.
:class에 객체를 전달, 객체의 속성값이 `true`인 키(클래스명)만 HTML 요소의 클래스로 추가.
:style 에 객체를 전달해 인라인 스타일을 동적으로 제어. CSS 속성 이름은 카멜케이스(fontSize)
3. v-model 양방향 데이터 바인딩
`v-model` 핵심 개념
v-model 은 폼(form) 입력 요소(<input>, <textarea>, <select>) 와 Vue의 데이터를 양방향으로 연결해주는 특별한 디렉티브.
데이터가 바뀌면 입력창의 내용이 바뀌고, 사용자가 입력창의 내용을 바꾸면 데이터도 실시간으로 바뀜.
`v-model` 기본 사용법
예시)
v-model="message" : <input> 태그에 v-model을 연결. data의 message 속성과 연결
사용자가 입력창에 글자를 타이핑, message 데이터의 값이 실시간 변경.
message 데이터가 바뀌자마자, {{ message }}로 연결된 <h2> 태그의 내용도 Vue에 의해 자동 업데이트.
`v-model` 다양한 사용법.
텍스트 입력, 체크박스, 라디오 버튼, 셀렉트 박스
`v-for ` 핵심 개념
v-for 는 javaScript의 `for` 반복문처럼, 배열(Array)이나 객체(Object)의 각 항목을 순회하며 HTML 요소를 반복적으로 렌더링 (화면에 그리기)하는 디렉티브.
`key` 속성은 필수.
v-for 를 사용할 때 반드시 :key 속성을 함께 사용. key는 항목마다 겹치지 않는 고유한 값. (html의 id 속성과 비슷함)
`v-for` 기본 사용법
가장 기본적인 형태 v-for="아이템 in 배열" 반복 중인 현재 아이템의 순서(index)가 필요하면
v-for="(아이템, index) in 배열" 형태로 사용 가능.
알아두면 유용한 기능들.
1. `computed` : 계산된 속성
computed 는 data 에 있는 값을 기반으로 동적으로 계산되는 새로운 `가상` 데이터.
마치 `자동 계산되는 엑셀 셀`과 같음. 원본 데이터(다른 셀)가 바뀌면, 수식이 적용된 이 셀의 값도 자동 업데이트.
methods 와 비슷해 보이지만, computed 는 결과가 캐시(저장) 된다는 결정적인 차이가 있음. 원본 데이터가 바뀌지 않으면, 여러 번 호출해도 미리 계산된 값을 즉시 반환하므로 성능상 이점이 있음.
2. `v-if` vs `v-show` : 조건부 렌더링
| 구분 | v-if | v-show |
| 초기 렌더링 비용 | 조건이 false면 렌더링 안해서 낮음 | 조건과 상관없이 렌더링해서 높음 |
| 토글 (전환) 비용 | 요소를 계속 추가/제거해서 높음 | CSS만 변경해서 낮음 |
| 추천 사용처 | 한 번 렌더링되면 잘 바뀌지 않는 경우 | 자주 보여주고 숨겨야 하는 경우 |
3. `watch` : 데이터 감시하기
watch 는 특정 `data` 가 변경될 때마다 지정된 함수를 실행하는 기능. 마치 특정 데이터에 `감시 카메라`를 설치하는 것과 같음.
computed 가 데이터 변경에 따라 `새로운 값`을 계산하는 데 중점을 둔다면, watch 는 데이터 변경에 따라 `특정 행동`(API 호출, 복잡한 로직 실행 등)을 하는데 중점을 둠.
4. 생명주기 훅 (Lifecycle Hooks)
모든 Vue 인스턴스는 생성되고, 화면에 부착되고, 업데잍트되고, 소멸하는 생명주기(Lifecycle)를 가짐. 생명주기 훅은 이 과정의 특정 시점에 실행할 코드를 등록할 수 있게 해주는 특별한 함수.
그중 mounted() 는 Vue 인스턴스가 생성되고 화면에 완전히 부착된 직후에 호출.
따라서 페이지가 처음 뜰 때 서버에서 데이터를 불러오는 등 초기화 작업을 하기에 가장 이상적인 장소.
5. 동적 클래스 & 스타일 바인딩 (심화)
:class 와 :style 에는 객체뿐만 아니라 배열을 사용하여 여러 개의 동적인 스타일을 더 유연하게 조합할 수 있음.
6. 한 페이지에 여러 Vue 앱 사용하기
Vue는 페이지 전체를 하나의 거대한 앱으로 만드는 것 외에도, 페이지의 특정 부분부분을 독립적인 미니 앱으로 만들어주는 `위젯`처럼 사용 가능. 이를 위해 한 HTML 페이지 안에서 여러 개의 Vue 인스턴스를 생성하고 마운트 할 수 있음.
사용 하는 곳 : 이미 만들어진 기존 웹사잍트 (예: 워드프레스, PHP 기반 사이트)에 동적인 기능을 추가하고 싶을 때 유용.
예시) 사이드바에 `실시간 환율 위젯`을 Vue로 만들고, 게시물 하단에 `댓글 시스템`을 또 다른 Vue 앱으로 만드는 식.
핵심은 각 앱을 마운트할 별도의 HTML 요소(id)를 준비.
createApp().mount() 를 여러 번 호출.
각 앱은 서로의 데이터나 메서드를 알지 못하는 완전히 독립적인 섬처럼 동작.
- 명령형 vs 선언형: Vanilla JS가 DOM을 하나하나 직접 조작하는 '명령형' 방식이라면, Vue는 데이터와 화면을 연결해두고 '알아서 그려달라'고 맡기는 '선언형' 방식
- 반응성 (Reactivity): Vue의 가장 큰 마법으로, data에 정의된 값이 바뀌면 화면도 자동으로 업데이트되는 원리
- Vue 인스턴스: Vue.createApp({...}).mount('#app')을 통해 Vue 앱이 시작되고 HTML과 연결되는 기본 구조
- 핵심 디렉티브:
- v-on (@): 사용자 이벤트를 처리
- v-bind (:): HTML 속성을 데이터와 연결
- v-model: 폼 입력을 데이터와 양방향으로 동기화
- v-for: 배열 데이터를 기반으로 목록을 렌더링
- 유용한 기능들: computed(계산된 속성), v-if/v-show(조건부 렌더링), watch(데이터 감시)
CDN 방식의 장단점
장점
- 매우 간단한 설정: <script> 태그 한 줄만 추가하면 되므로, 개발 환경 설정에 대한 부담 없이 Vue의 핵심 개념 학습에만 집중할 수 있음.
- 빠른 프로토타이핑: 간단한 아이디어를 빠르게 테스트하거나, 기존 정적 페이지에 약간의 동적인 기능을 추가할 때 매우 유용함.
단점과 한계
- 코드 관리의 어려움: 모든 HTML, CSS, JavaScript 코드가 하나의 파일에 뒤섞이게 되어, 애플리케이션이 조금만 복잡해져도 '스파게티 코드'가 되기 쉬움.
- 컴포넌트 재사용 불가: Vue의 가장 큰 장점인 '싱글 파일 컴포넌트(SFC)'를 사용할 수 없어, 코드의 재사용과 모듈화가 거의 불가능함.
- 빌드 최적화 부재: 개발이 끝난 후 코드를 압축하거나 최적화하는 '빌드' 과정이 없으므로, 실제 서비스 환경에서는 성능이 떨어질 수 있음.
CDN 방식의 한계를 느껴 실제 현업에서는 Vite와 같은 빌드 도구를 사용.