입력과 데이터 바인딩
양방향 데이터 바인딩의 기본 원리를 이해합니다.
2장에서는 ref()를 사용하여 데이터를 만들고 화면에 출력하는 방법을 알아보았습니다.
<script setup>
import { ref } from 'vue'
const name = ref('홍길동')
</script>
<template>
<p>이름 : {{ name }}</p>
</template>
이번 장에서는 사용자가 입력한 값을 Vue 데이터에 저장하는 방법을 알아봅니다.
실제 웹 프로그램에서는 회원가입, 사원 등록, 상품 등록 등과 같이 여러 값을 입력받는 화면을 자주 사용합니다.
Vue에서는 v-model을 사용하면 입력창과 변수를 바로 연결할 수 있습니다.
일반 JavaScript에서는 입력창의 값을 가져오기 위해 먼저 해당 DOM 요소를 찾아야 합니다.
<input type="text" id="name">
<button onclick="showName()">확인</button>
<script>
function showName() {
const name =
document.getElementById("name").value
alert(name)
}
</script>
처리 과정을 정리하면 다음과 같습니다.
입력 요소가 많아지면 DOM을 찾는 코드도 반복됩니다.
const name =
document.getElementById("name").value
const phone =
document.getElementById("phone").value
const address =
document.getElementById("address").value
Vue는 입력 요소와 데이터를 미리 연결할 수 있기 때문에 매번 DOM 요소를 찾아 값을 읽는 코드를 줄일 수 있습니다.
Vue의 v-model은 입력 요소와 데이터를 연결하는 문법입니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name">
<p>입력한 이름 : {{ name }}</p>
</template>
입력창에 홍길동이라고 입력하면 name에도 자동으로 값이 들어갑니다.
↕
name
그리고 name을 사용하는 화면도 자동으로 변경됩니다.
입력창에 글자를 입력할 때마다 입력된 내용을 바로 화면에 표시해 보겠습니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<h2>이름 입력</h2>
<input
v-model="name"
placeholder="이름을 입력하세요"
>
<p>입력한 이름 : {{ name }}</p>
</template>
입력한 이름 : 홍
입력한 이름 : 홍길동
DOM을 찾거나 별도의 버튼을 눌러 화면을 갱신하지 않았습니다. name이 변경되면서 연결된 화면이 자동으로 변경된 것입니다.
<input id="name" oninput="changeName()">
<p id="result"></p>
<script>
function changeName() {
const name =
document.getElementById("name").value
document.getElementById("result").innerText =
name
}
</script>
JavaScript에서는 개발자가 다음 과정을 직접 처리합니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name">
<p>{{ name }}</p>
</template>
↕
name
↕
화면
Vue에서는 입력 요소와 화면이 데이터를 중심으로 연결되어 있습니다. 이것이 Vue의 데이터 중심 화면 관리 방식입니다.
실제 프로그램에서는 하나의 값만 입력하지 않습니다. 이번에는 이름, 전화번호, 주소를 입력받아 보겠습니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
const phone = ref('')
const address = ref('')
</script>
<template>
<h2>사원정보 입력</h2>
<p>
이름 :
<input v-model="name">
</p>
<p>
전화번호 :
<input v-model="phone">
</p>
<p>
주소 :
<input v-model="address">
</p>
<hr>
<h3>입력 결과</h3>
<p>이름 : {{ name }}</p>
<p>전화번호 : {{ phone }}</p>
<p>주소 : {{ address }}</p>
</template>
이름 [ 홍길동 ]
전화번호 [ 010-1111-2222 ]
주소 [ 서울 ]
입력 결과
이름 : 홍길동
전화번호 : 010-1111-2222
주소 : 서울
각 입력창과 변수가 연결되어 있기 때문에 입력할 때마다 결과도 자동으로 변경됩니다.
v-model로 저장된 데이터는 일반 프로그램 변수처럼 함수에서도 사용할 수 있습니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
const phone = ref('')
function save() {
console.log(name.value)
console.log(phone.value)
}
</script>
<template>
<p>
이름 :
<input v-model="name">
</p>
<p>
전화번호 :
<input v-model="phone">
</p>
<button @click="save">
저장
</button>
</template>
사용자가 다음과 같이 입력했다고 가정합니다.
전화번호 : 010-1111-2222
save() 함수에서는 다음과 같이 값을 사용할 수 있습니다.
name.value phone.value
Vue에서는 프로그램에서 데이터를 변경하면 연결된 입력창의 값도 자동으로 변경됩니다.
<script setup>
import { ref } from 'vue'
const name = ref('홍길동')
function changeName() {
name.value = '김철수'
}
</script>
<template>
<input v-model="name">
<button @click="changeName">
이름 변경
</button>
<p>현재 이름 : {{ name }}</p>
</template>
현재 이름 : 홍길동
버튼을 누르면 다음 코드가 실행됩니다.
name.value = '김철수'
현재 이름 : 김철수
여기서 v-model의 중요한 특징을 확인할 수 있습니다.
입력창과 데이터가 양쪽 방향으로 연결되는 방식을 양방향 데이터 바인딩이라고 합니다.
등록 프로그램에서는 저장 후 입력창을 비우는 작업이 자주 필요합니다.
Vue에서는 입력창 자체를 직접 비우지 않고 연결된 데이터를 비우면 됩니다.
function clear() {
name.value = ''
phone.value = ''
address.value = ''
}
전체 예제는 다음과 같습니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
const phone = ref('')
const address = ref('')
function clear() {
name.value = ''
phone.value = ''
address.value = ''
}
</script>
<template>
<h2>사원 등록</h2>
<p>
이름 :
<input v-model="name">
</p>
<p>
전화번호 :
<input v-model="phone">
</p>
<p>
주소 :
<input v-model="address">
</p>
<button @click="clear">
초기화
</button>
</template>
초기화 버튼을 누르면 다음 코드가 실행됩니다.
name.value = '' phone.value = '' address.value = ''
그러면 Vue가 연결된 입력창도 자동으로 비웁니다.
다음과 같이 각 입력창을 직접 찾아 값을 비우는 코드를 작성하지 않아도 됩니다.
document.getElementById("name").value = ""
document.getElementById("phone").value = ""
document.getElementById("address").value = ""
v-model은 텍스트 입력창뿐만 아니라 여러 HTML 입력 요소에서 사용할 수 있습니다.
<textarea v-model="memo"></textarea>
const memo = ref('')
<select v-model="department">
<option value="개발팀">개발팀</option>
<option value="영업팀">영업팀</option>
<option value="관리팀">관리팀</option>
</select>
const department = ref('개발팀')
<input
type="radio"
value="남"
v-model="gender"
> 남
<input
type="radio"
value="여"
v-model="gender"
> 여
const gender = ref('')
<input type="checkbox" v-model="agree" > 개인정보 수집 동의 const agree = ref(false)
text, textarea, select, radio, checkbox처럼 입력 컨트롤의 종류가 달라도 v-model을 이용해 Vue 데이터와 연결할 수 있습니다.
HTML 입력창에서 입력한 값은 문자열로 처리될 수 있습니다.
숫자로 사용하려면 v-model.number를 사용할 수 있습니다.
<script setup>
import { ref } from 'vue'
const age = ref(20)
</script>
<template>
<input
type="number"
v-model.number="age"
>
<p>나이 : {{ age }}</p>
</template>
v-model.number="age"를 사용하면 입력값을 숫자로 변환하는 데 도움이 됩니다.
지금까지 배운 내용을 이용하여 간단한 사원 등록 프로그램을 만들어 보겠습니다.
<script setup>
import { ref } from 'vue'
const name = ref('')
const age = ref(20)
const phone = ref('')
const department = ref('개발팀')
const memo = ref('')
function save() {
alert(
'이름 : ' + name.value +
'\n나이 : ' + age.value +
'\n전화번호 : ' + phone.value +
'\n부서 : ' + department.value
)
}
function clear() {
name.value = ''
age.value = 20
phone.value = ''
department.value = '개발팀'
memo.value = ''
}
</script>
<template>
<h1>사원 등록</h1>
<p>
이름 :
<input v-model="name">
</p>
<p>
나이 :
<input
type="number"
v-model.number="age"
>
</p>
<p>
전화번호 :
<input v-model="phone">
</p>
<p>
부서 :
<select v-model="department">
<option>개발팀</option>
<option>영업팀</option>
<option>관리팀</option>
</select>
</p>
<p>
메모 :
<textarea v-model="memo"></textarea>
</p>
<button @click="save">
저장
</button>
<button @click="clear">
초기화
</button>
<hr>
<h2>입력 내용 확인</h2>
<p>이름 : {{ name }}</p>
<p>나이 : {{ age }}</p>
<p>전화번호 : {{ phone }}</p>
<p>부서 : {{ department }}</p>
<p>메모 : {{ memo }}</p>
</template>
이름 입력
나이 입력
전화번호 입력
부서 선택
메모 입력
[저장] [초기화]
입력한 내용이 아래 화면에 자동으로 표시됩니다.
이 프로그램에서 중요한 것은 HTML 입력 컨트롤을 직접 찾아 값을 읽거나 변경하는 코드가 거의 없다는 것입니다.
↕
v-model
↕
Vue 데이터 → 프로그램 처리
입력값을 읽는 방법부터 비교해 보겠습니다.
const name =
document.getElementById("name").value
<input v-model="name">
프로그램에서는 다음과 같이 값을 사용할 수 있습니다.
name.value
| 작업 | JavaScript DOM 방식 | Vue |
|---|---|---|
| 입력값 읽기 | 요소를 찾아 .value | v-model로 연결 |
| 입력값 변경 | 요소의 .value 변경 | 변수 변경 |
| 입력창 초기화 | DOM 요소 직접 변경 | 변수 초기화 |
| 화면 출력 | innerText 등으로 변경 | {{ }} |
| 데이터 관리 | DOM과 데이터 관리 코드가 섞이기 쉬움 | 데이터 중심으로 관리 가능 |
Vue에서는 입력창 자체를 중심으로 프로그램을 작성하기보다 Vue 데이터를 중심으로 입력과 화면을 연결합니다.