Vue가 뭔지, 그리고 Vue의 기본 문법이 궁금하시다면?
2025.11.18 - [Web/Vue] - Vue.js 입문 : 기본 철학과 기본 문법 정리
Vue.js 입문 : 기본 철학과 기본 문법 정리
1. Vue.js는 어떤 프레임워크인가? Vue.js는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 프레임워크입니다.HTML, CSS, JavaScript 위에서 동작하기 때문에,기존 웹 개발 흐름을 크게 벗어나지 않으
sproutinghye.tistory.com
1. 옵션 API (Options API)
Vue2에서는 컴포넌트를 만들 때 옵션 API 방식으로 코드를 작성합니다.
즉, 하나의 컴포넌트 안에 아래의 옵션들을 선언형으로 쭉 적어 넣는 스타일이에요.
- data
- methods
- computed
- watch
이 네 가지가 Vue 2의 기본기이자,
나중에 Vue 3에서 Composition API로 바꿔 쓸 때도 1:1로 매핑해서 생각하게 되는 핵심 개념입니다.
이제 data, methods, computed, watch의 역할과 차이에 대해서 정리해보겠습니다.
2. data와 methods: 상태와 행동
data와 methods는 각각 화면에 뿌릴 상태와 행동입니다.
1️⃣ data: 상태(state)
Vue 인스턴스 혹은 컴포넌트를 만들 때 data 옵션 안에 정의하는 값들은 Vue의 반응성 시스템에 의해 관리됩니다.
즉, data 안의 값을 변경하면, 그 값을 쓰고 있는 템플릿이 자동으로 다시 렌더링됩니다.
new Vue({
el: '#app',
data() {
return (
count: 0,
username: '홍길동'
)
}
})
여기서 count, username은 모두 reactive 데이터입니다.
템플릿에서 {{ count }}, {{ username }}으로 쓰면 값이 바뀔 때마다 화면도 함께 갱신됩니다.
2️⃣ methods: 행동
methods는 말 그대로 함수(메서드)를 모아두는 곳입니다.
버튼 클릭, 폼 제출, 데이터 가공 로직 등 행동을 담당합니다.
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
reset() {
this.count = 0
}
}
})
템플릿에서는 아래와 같이 메서드를 연결합니다.
<p>Count : {{ count }}</p>
<button @click="increment">+1</button>
<button @click="reset">Reset</button>
- @click="increment" : 버튼을 클릭하면 methods.increment() 실행
- this.count++ : data.count가 바뀌고, 화면도 함께 갱신
3. computed vs watch
Vue를 배우면 많이들 헷갈려하는 부분이 바로 이 두 가지입니다.
- computed: 어떤 값을 계산해서 반환하는 용도
- watch: 특정 데이터가 변할 때마다 부수적인 효과를 실행하는 용도
1️⃣ computed : 캐싱되는 계산된 값
computed는 다른 reactive 데이터에 의존해서 계산된 값을 반환합니다.
중요한 특징은 캐싱된다는 점입니다.
의존하는 값이 변하기 전까지는 다시 계산하지 않고 기존 값을 재사용합니다.
new Vue({
el: '#app',
data() {
return {
firstName: '길동',
lastName: '홍'
}
},
computed: {
fullName() {
// firstName 또는 lastName이 바뀔 때만 다시 계산
return this.lastName + ' ' + this.firstName
}
}
})
<p>이름: {{ fullName }}</p>
여기서 fullName은 단순히 data를 기반으로 계산된 값일 뿐이고,
다른 상태를 변경하거나, API 요청을 날리거나, DOM을 건드리면 안 됩니다.
(이건 methods나 watch의 역할)
2️⃣ watch : 값이 바뀔 때마다 반응하는 감시자
watch는 말 그대로 특정 데이터를 감시(watch)하면서
그 값이 바뀌면 콜백을 실행하는 용도입니다.
new Vue({
el: '#app',
data() {
return {
searchKeyword: '',
result: null
}
},
watch: {
searchKeyword(newVal, oldVal) {
console.log('검색어 변경:', oldVal, '->', newVal)
this.fetchData(newVal)
}
},
methods: {
fetchData(keyword)
// 여기에서 axios로 API 호출
}
})
여기서 watch는
- searchKeyword가 바뀔 때마다 API 호출
- 이전 값(oldVal), 새 값(newVal)을 인자로 받을 수 있음
같은 패턴에 잘 어울립니다.
3️⃣ 언제 compute / watch / methods를 써야 할까?
computed는
- 다른 상태를 기반으로 계산된 값
- 캐싱됨
- 부수 효과(사이드 이펙트) 금지
watch는
- 값이 바뀔 때마다 뭔가 해야 할 때
- API 요청, 타이머, 로깅, 추가 계산 등
methods는
- 이벤트 핸들러, 버튼 클릭, 폼 제출, 즉시 실행 액션 등
이라는 기준으로 나눠서 생각하면 헷갈리지 않습니다.
4. 예제
아래 예제는 Vue 기본 문법과 오늘 작성한 글 내용을 한 번에 섞은 미니 계산기입니다.
<div id="app">
<h2>간단계산기</h2>
<input v-model.number="a" type="number" /> +
<input v-model.number="b" type="number" />
<button @click="swap">a와 b 바꾸기</button>
<p>결과 (computed) : {{ sum }}</p>
<p v-if="sum > 10">10보다 큰 값입니다.</p>
<p v-else>10보다 이하의 값입니다.</p>
<h3>히스토리</h3>
<ul>
<li v-for="(item, index) in history" :key="index">
{{ item }}
</li>
</ul>
</div>
<script scr="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
a: 0,
b: 0,
history: []
}
},
computed: {
sum() {
return this.a + this.b
}
},
watch: {
sum(newVal, oldVal) {
this.history.push(`${oldVal} -> ${newVal}`)
}
},
methods: {
swap() {
const temp = this.a
this.a = this.b
this.b = temp
}
}
})
</script>
여기서 등장한 것들을 정리하자면 아래와 같습니다.
- data: a, b, history
- computed.sum: 계산된 결과
- watch.sum: sum이 바뀔 때마다 히스토리 누적
- methods.swap: 버튼 클릭 시 a, b 값 교환
- v-if 와 v-else, v-for, v-model, @click
정리 및 요약
- data: 화면과 연결되는 상태(state)
- methods: 이벤트 핸들러, 행동 로직
- computed: 다른 상태 기반의 계산된 값. 캐싱됨. 부수적인 효과 없음
- watch: 특정 값이 바뀔 때마다 동작해야 하는 로직 (API 호출 등)
- v-if / v-show: 조건부 렌더링 (자주 바뀌면 v-show, 아니면 v-if)
- v-for: 리스트 렌더링, 반드시 :key 습관적으로 붙이기
- v-model: 양방향 바인딩, 폼 처리의 핵심
출처
Vue에서의 데이터 흐름이 궁금하다면?
2025.11.19 - [Web/Vue] - Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기
Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기
Vue가 뭔지, 그리고 Vue의 기본 문법이 궁금하시다면? 2025.11.18 - [Web/Vue] - Vue.js 입문 : 기본 철학과 기본 문법 정리 Vue.js 입문 : 기본 철학과 기본 문법 정리1. Vue.js는 어떤 프레임워크인가? Vue.js는
sproutinghye.tistory.com
'Framework > Vue' 카테고리의 다른 글
| Vuex 기초: Vue 전역 상태 관리 (state, getters, mutations, actions, modules) (1) | 2025.11.20 |
|---|---|
| Vue Router와 Axios 활용해 라우팅 + API 연동으로 SPA 만들기 (0) | 2025.11.20 |
| Vue Router 기초 (Vue 2 + Vue Router 3) (1) | 2025.11.19 |
| Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기 (0) | 2025.11.19 |
| Vue.js 입문 : 기본 철학과 기본 문법 정리 (0) | 2025.11.18 |