Vue 시작하기
Vue의 핵심인 반응형 데이터 처리 방식을 이해합니다.
Vue.js는 JavaScript를 이용하여 웹 화면을 효율적으로 개발하기 위한 프론트엔드 프레임워크입니다.
HTML, CSS, JavaScript를 기반으로 사용하며 특히 데이터와 화면을 연결하여 데이터가 변경되면 화면도 자동으로 갱신되는 반응형(Reactivity) 방식을 제공합니다.
CSS → 디자인
JavaScript → 프로그램 로직
Vue → 데이터와 화면을 체계적으로 연결
Vue는 JavaScript를 기반으로 사용하는 프레임워크입니다. 따라서 JavaScript 위에 Vue의 기능을 더해 웹 응용프로그램을 보다 체계적으로 개발한다고 이해하면 좋습니다.
일반 JavaScript에서는 데이터를 변경한 후 화면에 반영하려면 DOM 요소를 찾아 변경하는 코드를 작성하는 경우가 많습니다.
let count = 100;
document.getElementById("result").innerText = count;
값을 변경한 경우에도 화면을 다시 변경합니다.
count = 200;
document.getElementById("result").innerText = count;
Vue에서는 화면과 데이터를 미리 연결합니다.
<p>{{ count }}</p>
그리고 데이터만 변경합니다.
count.value = 200;
그러면 Vue가 데이터의 변경을 감지하여 연결된 화면을 자동으로 갱신합니다.
JavaScript에서는 데이터를 변경한 뒤 화면을 직접 수정하는 코드가 필요한 경우가 많지만, Vue에서는 데이터를 변경하면 연결된 화면이 따라 변경되도록 구성할 수 있습니다.
가장 중요한 차이를 간단하게 비교하면 다음과 같습니다.
| JavaScript | Vue |
|---|---|
| DOM 중심으로 직접 처리 가능 | 데이터 중심으로 화면 관리 |
| HTML 요소를 직접 찾는 경우가 많음 | 데이터를 화면과 연결 |
| getElementById() 등 사용 | {{ }} 등으로 데이터 연결 |
| 데이터 변경 후 화면 처리 필요 | 데이터 변경 시 자동 갱신 |
| 화면이 커지면 관리 코드 증가 | 컴포넌트로 구조화 가능 |
Vue의 핵심은 HTML을 직접 찾아가며 변경하기보다 데이터를 변경하면 화면이 따라오도록 만드는 것입니다.
다음 프로그램은 count 변수에 값을 넣고, 출력하고, 변경하고, 비우는 프로그램입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript 실습</title>
</head>
<body>
<h2>JavaScript</h2>
<p>
현재 값 :
<span id="result">없음</span>
</p>
<button onclick="createCount()">값 넣기</button>
<button onclick="readCount()">값 출력</button>
<button onclick="updateCount()">값 변경</button>
<button onclick="deleteCount()">값 비우기</button>
<script>
let count;
// 값 넣기
function createCount() {
count = 100;
document.getElementById("result").innerText = count;
}
// 값 출력
function readCount() {
document.getElementById("result").innerText = count;
}
// 값 변경
function updateCount() {
count = 200;
document.getElementById("result").innerText = count;
}
// 값 비우기
function deleteCount() {
count = null;
document.getElementById("result").innerText = "없음";
}
</script>
</body>
</html>
값 넣기 → 100
값 변경 → 200
값 비우기 → 없음
여기서 중요한 것은 다음 코드가 여러 함수에서 반복된다는 점입니다.
document.getElementById("result").innerText = count;
이 프로그램에서는 개발자가 데이터 변경과 화면 변경을 함께 관리하고 있습니다.
즉, count의 값을 바꾸는 것뿐만 아니라 변경된 값을 어떤 HTML 요소에 표시할지도 직접 처리합니다.
이번에는 앞에서 만든 프로그램과 같은 기능을 Vue로 만들어 보겠습니다.
Vue에서는 count를 화면과 연결합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue 실습</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>Vue</h2>
<p>
현재 값 : {{ count ?? '없음' }}
</p>
<button @click="createCount">값 넣기</button>
<button @click="readCount">값 출력</button>
<button @click="updateCount">값 변경</button>
<button @click="deleteCount">값 비우기</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const count = ref(null);
function createCount() {
count.value = 100;
}
function readCount() {
alert(count.value);
}
function updateCount() {
count.value = 200;
}
function deleteCount() {
count.value = null;
}
return {
count,
createCount,
readCount,
updateCount,
deleteCount
};
}
}).mount("#app");
</script>
</body>
</html>
Vue에서는 ref(null)로 반응형 데이터를 만들고, {{ count }}와 같은 형태로 데이터를 화면에 연결할 수 있습니다.
이후 count.value의 값이 바뀌면 Vue가 변화를 감지하여 연결된 화면을 갱신합니다.
function updateCount() {
count = 200;
document.getElementById("result").innerText = count;
}
function updateCount() {
count.value = 200;
}
두 코드를 비교하면 Vue에서는 HTML 화면을 직접 변경하는 코드가 없다는 것을 확인할 수 있습니다.
JavaScript 예제에서는 데이터와 DOM을 함께 변경하지만, Vue 예제에서는 데이터를 변경하면 Vue가 화면을 갱신합니다.
Vue의 중요한 특징 중 하나가 반응형(Reactivity)입니다.
먼저 다음과 같이 ref()를 이용해 반응형 데이터를 만들 수 있습니다.
const count = ref(100);
이 데이터는 화면의 여러 위치에서 사용할 수 있습니다.
<h1>{{ count }}</h1>
<p>현재 값 : {{ count }}</p>
<button>수량 {{ count }}</button>
같은 count 데이터를 제목, 문장, 버튼 등 여러 곳에 연결한 상태입니다.
이때 다음 한 줄을 실행합니다.
count.value = 200;
그러면 count와 연결된 화면이 모두 새로운 값으로 변경됩니다.
│
100 → 200
│
┌────────┼────────┐
│ │ │
h1 p button
200 200 200
p → 현재 값 : 200
button → 수량 200
하나의 데이터를 여러 화면 요소와 연결해 두고 데이터 하나만 변경하면 연결된 화면들이 함께 변경된다고 이해하면 됩니다.
따라서 개발자는 어느 HTML 요소를 변경해야 하는지 일일이 찾아다닐 필요가 없습니다.
- Vue.js는 JavaScript를 이용하는 프론트엔드 프레임워크이다.
- Vue가 JavaScript를 대신하는 것은 아니며 JavaScript를 기반으로 사용한다.
- 일반 JavaScript에서는 DOM 요소를 직접 찾아 화면을 변경하는 경우가 많다.
- Vue에서는 데이터를 화면과 연결하여 관리할 수 있다.
- ref()를 이용하여 반응형 데이터를 만들 수 있다.
- ref로 만든 값은 JavaScript 코드에서 .value를 이용해 변경할 수 있다.
- 데이터가 변경되면 Vue가 변화를 감지하고 연결된 화면을 갱신한다.
- 같은 데이터를 여러 화면 요소에서 사용해도 데이터 하나를 변경하면 함께 갱신할 수 있다.