06. Data Binding

양방향 데이터 바인딩에 대해 학습합니다

양방향 데이터 (Two way binding) 바인딩

양방향 데이터 바인딩을 알아보기 전에 그렇다면 단방향 데이터 바인딩은 무엇일까요 ?

우리가 이전 챕터에서 webtoon 예제를 만들면서 v-for 를 이용하여 리스트를 렌더링하면서 name, img, link 등등의 요소를 component 에서 표시하였습니다. 양쪽 (vue 인스턴스와 component) 에서 접근을 하는 것이 아닌 Vue 인스턴스의 값을 component 에게 준것 뿐이기 때문에 이는 단방향 데이터 바인딩입니다. 양방향 데이터 바인딩은 Vue 인스턴스와 component 가 서로의 데이터에 접근하는 것을 말합니다. vue 에서는 v-model 디렉티브를 이용하여 양방향 데이터 바이딩을 지원합니다.

실습

(예제는 이전의 초기 구성되었던 환경에서 시작합니다.)

Input

양방향 데이터 바인딩의 대표적인 예제는 폼을 다루는 것 입니다. v-model 은 state 값을 꼭 사용해야합니다. props 로 내려받은 값을 바로 v-model 에서 사용할 수는 없습니다. 구성해볼 예제는 input 에 입력된 값을 h1 태그의 텍스트 값으로 이용하여 title 을 구성해보는 것 입니다. <h1> 태그와 <input /> 태그를 준비해주세요 :)

// App.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="title">
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ""
    };
  }
};
</script>

<style>
</style>

App.vue 는 title 이라는 state 를 가지고 있습니다.
input 은 v-model 로 title state 를 사용합니다.
h1 태그는 title state 를 바탕으로 내용을 구성합니다.

input 에 값을 입력해보시면 아래와 같이 마법같은 일이 이루어집니다. 이것이 양방향 데이터 바인딩인데요 아래의 흐름으로 이루어집니다.

input 에 값이 입력된다.
input 의 값을 바탕으로 title state 가 업데이트된다.
업데이트된 state 값이 title 에 표시된다.

state 를 이용하여 component 를 구성하게된다면 jQuery 를 이용하여 개발하던 방식처럼 직접적인 dom의 접근을 피할 수 있습니다. 어떤 값을 변경하고 표시하기 위해 변경된 값을 가져오고, 표시해줄 dom 을 잡아와서 innerText 와 같은 함수를 이용하여 텍스트를 넣어주는 식의 dom 접근 개발방식에서 벗어날 수 있습니다.

CheckBox

체크박스 또한 input 과 같은 방식으로 구성할 수 있습니다. 뒤의 챕터에서 input 과 checkbox 를 이용하여 웹툰을 찜하고 검색하는 예제도 구성해보겠습니다 :)

// App.vue
<h2>웹툰</h2>
<div>
  <input type="checkbox" id="프롬스타" value="프롬스타" v-model="checkedWebtoons">
  <label for="프롬스타">프롬스타</label>
  <input type="checkbox" id="햄스터와그녀" value="햄스터와 그녀" v-model="checkedWebtoons">
  <label for="햄스터와그녀">햄스터와 그녀</label>
  <input type="checkbox" id="위대한로맨스" value="위대한 로맨스" v-model="checkedWebtoons">
  <label for="위대한로맨스">위대한 로맨스</label>
  <input type="checkbox" id="아귀" value="아귀" v-model="checkedWebtoons">
  <label for="아귀">아귀</label>
  <br>
  <span>찜한 웹툰: {{ checkedWebtoons }}</span>
</div>
  
<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
    };
  }
};
</script>

RadioBox

성별을 조사하기 위한 selectbox 를 구성해보겠습니다.

// App.vue 

<h2>성별</h2>
<input type="radio" id="male" value="male" v-model="gender">
<label for="male">남</label>
<br>
<input type="radio" id="female" value="female" v-model="gender">
<label for="female">여</label>
<br>
<span>당신의 성별을 알려주세요: {{ gender }}</span>

<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
    };
  }
};
</script>

SelectBox

selectBox 를 이용하여 선호 장르 조사를 해보겠습니다.

// App.vue

<h2>선호 장르</h2>
<select v-model="category">
  <option disabled value>선택해주세요</option>
  <option>로맨스</option>
  <option>호러</option>
  <option>스릴러</option>
</select>
<span>선택: {{ category }}</span>

<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
      gender: "",
      category: ""
    };
  }
};
</script>

마무리

양방향 데이터 바인딩에 대해서 학습하고 v-model 을 이용하여 실습을 해보았습니다. 앞으로 모든 예제와 실습에 있어 중요한 개념입니다. 꼭 여러가지 실습을 해보시고 넘어가시길 바랍니다. 참고: 공식문서

실습문제

체크박스를 이용하여 이전 챕터에서 만든 웹툰의 찜목록을 구성해보세

Previous05. v-if, v-show 를 이용한 조건부 렌더링 Next07. Computed 와 watch

Last updated 5 years ago