Vue.js(6)_Data Binding

해당 게시글은 2022.07.22에 깃허브로 작성되었으며

여러 강의 블로그를 따라하며 정리한 내용입니다.

 

---

 

1. 단방향 데이터

이번에는 양방향 데이터(Two way biding) 바인딩에 대해 알아볼텐데 양방향 데이터를 알아보기 전에 단방향 데이터에 대해 먼저 알아보자.

 

우리가 이전에 Webtoon 예제를 만들면서 v-for를 이용하여 리스트를 렌더링하고 name, img, link 등의 요소를 component에서 표시했다.

이는 양쪽(vue 인스턴스와 component)에서 접근하는 것이 아닌, vue 인스턴스의 값을 component에게 준 것뿐이기 때문에 단방향 데이터 바인딩이라고 한다.

 

---

 

2. 양방향 데이터

양방향 데이터 바인딩은 Vue 인스턴스와 component가 서로의 데이터에 접근하는 것을 말한다.

vue에서는 v-model 디렉티브를 이용하여 양방향 데이터 바인딩을 지원한다.

 

양방향 데이터 바인딩의 대표적인 예제는 폼을 다루는 것이다.

props로 내려받은 값은 바로 v-model에서 사용할 수 없으므로 v-model은 state값을 꼭 사용해야 한다.

 

(1) input

예제를 통해 데이터 바인딩 방법에 대해 알아보자.

아래 명령어를 통해 새로운 프로젝트를 생성하고

vue create data_binding

 

App.vue를 다음과 같이 작성해보자.

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

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      title: ""
    }
  },
}
</script>

<style>
</style>

이후 페이지에서 input창에 값을 입력할 때마다 자동으로 h1 태그 내에 해당값이 나타난다.

이는 아래와 같은 흐름으로 이루어진다.

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

 

(2) checkBox

체크박스 또한 input과 같은 방식으로 구성할 수 있다.

App.vue를 다음과 같이 수정해보자.

// App.vue
<template>
  <!-- <div>
    <h1>{{title}}</h1>
    <input v-model="title">
  </div> -->
  <div>
    <h2>웹툰</h2>
    <div>
      <input type="checkbox" id="프롬스타" value="프롬스타" v-model="checkedWebtoon"/>
      <label for="프롬스타">프롬스타</label>
      <input type="checkbox" id="햄스터와 그녀" value="햄스터와 그녀" v-model="checkedWebtoon"/>
      <label for="햄스터와 그녀">햄스터와 그녀</label>
      <input type="checkbox" id="위대한 로맨스" value="위대한 로맨스" v-model="checkedWebtoon"/>
      <label for="위대한 로맨스">위대한 로맨스</label>
      <input type="checkbox" id="아귀" value="아귀" v-model="checkedWebtoon"/>
      <label for="아귀">아귀</label>
      <br/>
      <span>찜한 웹툰: {{checkedWebtoon}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      title: "",
      checkedWebtoon: [],
    }
  },
}
</script>

 

이 또한 우리가 선택한 checkbox의 내용을 읽어오는 걸 볼 수 있다.

 

(3) radioBox

이번엔 radioBox에 적용해보자.

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

  <!-- <div>
    <h2>웹툰</h2>
    <div>
      <input type="checkbox" id="프롬스타" value="프롬스타" v-model="checkedWebtoon"/>
      <label for="프롬스타">프롬스타</label>
      <input type="checkbox" id="햄스터와 그녀" value="햄스터와 그녀" v-model="checkedWebtoon"/>
      <label for="햄스터와 그녀">햄스터와 그녀</label>
      <input type="checkbox" id="위대한 로맨스" value="위대한 로맨스" v-model="checkedWebtoon"/>
      <label for="위대한 로맨스">위대한 로맨스</label>
      <input type="checkbox" id="아귀" value="아귀" v-model="checkedWebtoon"/>
      <label for="아귀">아귀</label>
      <br/>
      <span>찜한 웹툰: {{checkedWebtoon}}</span>
    </div>
  </div> -->

  <div>
    <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>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      title: "",
      checkedWebtoon: [],
      gender: ""
    }
  },
}
</script>

 

(4) selectBox

selectBox에도 적용해보면

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

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      title: "",
      checkedWebtoon: [],
      gender: "",
      category: ""
    }
  },
}
</script>

잘 작동하는 것을 확인할 수 있다.

 

---

 

데이터 바인딩은 Vue 프로젝트에서 매우 중요한 개념이기에 예제는 쉬울지 몰라도 잘 이해해서 넘어가야 한다.

다음 시간에는 data를 다루는 데 유용한 Computed와 Watch에 대해 알아보자.