[데이터 바인딩이란?]
- 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스
- 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
- 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우 데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영된다.
[양방향 데이터 바인딩]
- 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩이다.
- 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것이다. (HTML -> JS, JS -> HTML 양쪽 모두 가능)
- 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경한다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크해주지 않아도 된다.
- 양방향 데이터 바인딩은 웹 애플리케이션의 복잡도가 증가하면 증가할수록 빛을 발한다. 수많은 코드의 양을 줄여줄 뿐만 아니라 유지보수나 코드를 관리하기 매우 쉽게 해주기 때문이다.
[단방향 데이터 바인딩]
- 장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능,
데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움 - 단점: 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함
나는 주로 리액트를 사용해서 프로젝트를 했었는데 리액트는 부모-> 자식으로 데이터가 흐르는 단방향 데이터 흐름을 가지고 있었다. 리액트는 사용자의 입력에 따라 데이터가 갱신되고 화면이 업데이트 되어야하는 과정에서 부모에서 자식으로 내용을 전달하고 화면을 업데이트 하는 코드를 매번 작성해주어야한다.
[vue.js 에서 양방향 바인딩]
- V-model과 V-on을 통해 양방향 데이터 바인딩을 한다.
- v-model이 DOM 연관된 내용을 잡아내고, vue가 바라보는 대상의 속성과 연결됨.
- v-on은 이벤트를 잡아내는 데 사용한다.
[예제]
폼 입력 바인딩
살펴볼 예제는 input박스에 입력하는 대로 밑에 입력한 value값이 나타나도록 해보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 기초 익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<input type="text" :value='text' @keyup='updateText'><br>
{{ text }}
<button type="submit">submit</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data : {
year : 2021,
text: 'text'
},
methods : {
plus(){
this.year ++;
},
minus(){
this.year --;
},
submit(){
alert('submit');
console.log('hello')
},
updateText(event) {
this.text = event.target.value;
}
}
})
</script>
</body>
</html>
위 코드는 data안에 있는 text의 값 'text'가 원래 input의 value이고 keyup 이벤트가 발생하면 updateText라는 method를 실행하여 value와 text의 값이 같아지는 코드이다.
이것을 양방향 바인딩 코드로 작성해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 기초 익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<!-- <input type="text" :value='text' @keyup='updateText'><br> -->
<input type="text" v-model="text"><br>
{{ text }}
<button type="submit">submit</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data : {
year : 2021,
text: 'text'
},
methods : {
plus(){
this.year ++;
},
minus(){
this.year --;
},
submit(){
alert('submit');
console.log('hello')
},
updateText(event) {
this.text = event.target.value;
}
}
})
</script>
</body>
</html>
여기서 보면 updateText라는 함수를 쓰지 않고 v-model만 써서 data에 있는 text와 연결만 해주었는데 같은 결과가 나온다.
[참고자료]
728x90
'WEB > VUE.js' 카테고리의 다른 글
| [Vue.js] 한글 바인딩 시 v-model 대신에 v-on:input 사용 (0) | 2021.11.07 |
|---|---|
| [VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기 (0) | 2021.11.03 |
| [Vue.js] button 이벤트 핸들링/ 이벤트 수식어 (0) | 2021.10.12 |
| [Vue.js] input 데이터 바인딩 (0) | 2021.10.12 |
| [Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기 (0) | 2021.10.12 |