5. [Vue.js] 데이터 바인딩 응용

1. 단방향 바인딩

  앞서 데이터 바인딩에 대해 배웠고, 이젠 Vue.js의 데이터 바인딩 기능을 활용하는 방법에 대해 알아보자. Vue.js의 MVVM 구조에서 우리가 작성하는 HTML 코드에 바인딩 변수와 JavaScript 코드를 어떻게 연결 할 수 있는 지 알아보았다. JavaScript 데이터에 연결된 변수를 바꿈에 따라 우리가 보여지는 변수가 변경되는 것을 보았다. 이를 단방향 바인딩이라고 한다.

  반대로 우리가 작성하는 HTML input을 변경하여 javaScript를 변경할 수 있다. 이 방식을 양방향 바인딩이라고 한다.

  기본적으로 웹 페이지를 두 부분으루 나누게 된다면 위 부분에 HTML로 작성 된 DOM 부분과 아래 부분의 Vue.js로 구성된다. 

DOM : HTML로 작성 (View)

Vue.js Instance : javascirpt로 작성 (Data)

  단방향 바인딩의 경우 Vue.js의 데이터가 DOM으로 전달되게 된다. 아래의 코드를 한번 살펴보자

- DOM

    <h2>Vue.js 데이터 바인딩</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img><br></br>
      <input type="text" name="" v-bind:value="text">
      <div>{{ text }}</div>
    </div>

Input 태그를 선택하고 단방향 바인딩 속성인 v-bind를 활용해 바인딩을 했다. 데이터 (Vue.js Instance)는 다음과 같이 작성했다.

- Vue.js Instance

      var app = new Vue({
        el: '#instance',
        data: {
          img: 'https://kr.vuejs.org/images/logo.png',
          text: 'Hello vue.js'
        }
      })

  text에 작성된 hello vue.js가 text 변수로 바인딩 되어 들어갈 수 있다. 하지만 input의 데이터를 변경한다고 하더라도 인스턴트에 존재하는 text의 값은 변경되지 않을 것이다. 

  위의 Data Input을 바꾸더라도 아래에 존재하는 값이 바뀌지 않는다. 반대로 크롬 개발자 도구를 활용해 Vue.js 인스턴스에 존재하는 데이터 자체를 변경하게 된다면 뷰의 값이 변경 된다.  

  

  Vue.js 인스턴스에 존재하는 변수 값을 바꾸게 되면 웹 페이지에 있는 값이 바꾸게 된다. 이 방법이 바로 단방향 바인딩 방식이다.

- 단방향 바인딩

• Vue.js 인스턴스에서 바인딩 된 변수를 통해 뷰에 존재하는 값 변경한다.
• 반대 방향으로의 값 변경은 불가능하다.
• 웹 페이지에 보여지는 값을 변경하기 위해서는 Vue.js 인스턴스에 있는 값을 변경해야 한다.
• v-bind 속성 사용

2. 양방향 바인딩

  양방향 바인딩은 앞서 본 단방향 바인딩과 달리 DOM을 수정함에 따라 Vue.js에 있는 인스턴스의 값도 변경되는 방식을 의미한다. 웹 페이지의 변수 입력 부분을 수정하게 되면 데이터의 값도 변경되어 실시간으로 변경되는 데이터를 볼 수 있다. 속성은 v-model이다.

- DOM

    <h2>Vue.js 데이터 바인딩</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img><br></br>
      <input type="text" name="" v-model:value="text">
      <div>{{ text }}</div>
    </div>

  양방향 데이터를 구현하기 위해 바인딩 속성을 v-model로 변경한다.

- Vue.js Instance

      var app = new Vue({
        el: '#instance',
        data: {
          img: 'https://kr.vuejs.org/images/logo.png',
          text: 'Hello vue.js'
        }
      })

  이제 웹페이지에 있는 input 태그의 값을 변경함에 따라 Vue.js의 인스턴스를 변경할 수 있다.

이와 같이 웹 페이지에서 동적으로 데이터의 값 변경이 가능하다.

- 양방향 바인딩

• Vue.js 인스턴스와 DOM 사이의 데이터 변경이 양방향으로 작동한다.
• 웹 페이지의 Input, CheckBox 등을 이용해 데이터 변경이 가능하다.
• v-model 속성을 사용한다.

3. 양방향 바인딩 응용

  양방향 바인딩은 Input 태그만 이 아니라 데이터를 주고받을 수 있는 Radio 버튼, Check box 모두 사용 가능하다. 이번엔 Radio 버튼을 이용하여 동적으로 데이터를 웹 페이지에 띄우는 사이트를 만들어 보자.

< 웹 페이지 요구 사항>

•  NBA 선수들을 한명 씩 선택해야 함 : Radio Buttom
•  5명의 NBA 선수 필요
•  선수 선택 시 하단에 해당 선수의 백넘버가 표시

이를 기반으로 DOM에 작성 될 HTML 코드는 다음과 같다.

    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img>
      <div class="radio_select">
        <div>Back Number of NBA Player</div><br>
        <input type="radio" name="player" value="23" v-model="checks">
        <label>Leborn James</label><br>
        <input type="radio" name="player" value="0" v-model="checks">
        <label>Russel Westbrook</label><br>
        <input type="radio" name="player" value="00" v-model="checks">
        <label>Damian Lillard</label><br>
        <input type="radio" name="player" value="77" v-model="checks">
        <label>Luka Doncic</label><br>
        <input type="radio" name="player" value="11" v-model="checks">
        <label>Klay Thompson</label><br>
      </div>
      <br><div>Back Number : {{ checks }}</div><br>
    </div>

  여기서 데이터 바인딩이 된 변수는 checks 이다.

v-model="checks"

  그리고 이 바인딩 된 변수를 vue.js 인스턴스 안에 선언되어야 하고, 해당 값은 {{ }} 안에 존재하는 checks에 노출된다.

      var app = new Vue({
        el: '#instance',
        data () {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
            checks: ''
          }
        }
      })

  인스턴스에 변수 선언까지 마쳤으면 양방향 바인딩을 위한 준비가 끝났다. 이제 웹 페이지를 실행시키면 라디오 버튼 선택에 따라 아래 백 넘버의 값이 변경 되는 것을 볼 수 있다.

주소 : https://adrian0220.github.io/Webclient/nbaplayer