Vue.js의 반응형 시스템이란?
Vue.js의 가장 강력한 기능 중 하나는 반응형(Reactivity) 시스템입니다. 반응형 시스템은 데이터가 변경될 때 자동으로 UI를 업데이트해 주는 기능을 제공합니다. 이를 통해 개발자는 별도의 DOM 조작 없이 데이터의 변화를 UI에 반영할 수 있습니다.
Vue.js의 반응형 시스템은 기본적으로 data 속성에 정의된 객체를 추적하여 변경 사항이 발생하면 자동으로 화면을 갱신하는 방식으로 동작합니다. 이러한 기능은 Vue 내부에서 **Proxy API**를 사용하여 구현됩니다.
1. 반응형 데이터 정의
Vue의 반응형 데이터는 data() 메서드에서 반환된 객체로 정의됩니다.
<script>
const app = Vue.createApp({
data() {
return {
count: 0,
message: '안녕하세요, Vue!'
};
}
}).mount('#app');
</script>위와 같이 정의된 count나 message의 값이 변경되면, Vue는 자동으로 이를 추적하고 해당 값이 사용된 UI 요소를 업데이트합니다.
2. 반응형 데이터 활용
반응형 데이터는 템플릿 내에서 직접 사용될 수 있습니다.
<div id="app">
<p>현재 카운트: {{ count }}</p>
<button @click="count++">증가</button>
</div>이 버튼을 클릭하면 count 값이 증가하고, 자동으로 UI가 갱신됩니다.
3. computed 속성과 반응형 시스템
computed 속성은 반응형 데이터를 기반으로 새로운 값을 생성할 때 유용합니다.
computed: {
doubleCount() {
return this.count * 2;
}
}위 코드에서 doubleCount는 count 값이 변경될 때 자동으로 업데이트됩니다.
4. Watcher를 활용한 데이터 감시
Vue에서는 특정 데이터의 변경을 감지하고 추가적인 로직을 실행할 수 있도록 **Watcher** 기능을 제공합니다.
watch: {
count(newValue, oldValue) {
console.log(`count 값이 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
}
}위 코드는 count 값이 변경될 때마다 콘솔에 변경된 내용을 출력합니다.
5. watch 속성을 활용한 비동기 데이터 처리
API 호출 등의 비동기 작업을 수행할 때 watch 속성을 활용할 수 있습니다.
watch: {
searchQuery(newQuery) {
this.fetchData(newQuery);
}
},
methods: {
async fetchData(query) {
const response = await fetch(`https://api.example.com/search?q=${query}`);
this.results = await response.json();
}
}사용자가 입력한 검색어(searchQuery)가 변경될 때마다 자동으로 API 요청이 실행됩니다.
6. Watch와 computed의 차이점
- computed: 기존 데이터를 기반으로 새로운 데이터를 계산하는 경우 사용
- watch: 데이터 변경 시 특정 로직을 실행하는 경우 사용
마무리
이번 글에서는 Vue.js의 반응형 시스템과 Watcher 활용법을 다뤘습니다.
- 반응형 데이터 정의 및 활용
- computed 속성을 이용한 데이터 가공
- watch 속성을 이용한 데이터 변경 감지
- 비동기 처리와 watch의 활용
다음 글에서는 **Vue의 디렉티브와 고급 템플릿 문법**을 다룰 예정입니다. 많은 기대 부탁드립니다! 😊