19. 2 way data binding

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2-way data binding</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js" integrity="sha512-Wbf9QOX8TxnLykSrNGmAc5mDntbpyXjOw9zgnKql3DgQ7Iyr5TCSPWpvpwDuo+jikYoSNMD9tRRH854VfPpL9A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <style>
      .app {
          font-size: 3em;
      }
  </style>
</head>
<body>
<div id="app">
  <p>{{ fullname() }}</p>
  <hr/>
  <label for="firstname">first name</label>
  <input id="firstname" type="text" v-model="firstname">

  <label for="lastname">last name</label>
  <input id="lastname" type="text" v-model="lastname">
</div>

<script>
  const vm = Vue.createApp({
    data() {
      return {
        firstname: 'hyungju',
        lastname: 'lee',
      }
    },
    methods: {
      fullname() {
        return `${this.firstname}-${this.lastname}`
      }
    }
  }).mount('#app');
</script>
</body>
</html>

위 기능을 자바스크립트로 구현한다면 아래와 같은 코드가 될 것이다.

const input = document.querySelector('#firstname');

input.addEventListener('keyup', (e) => {
    const p = document.querySelector('p');
    
    p.innerText = e.target.value;
})

위와 같이 자바스크립트로도 동일한 기능을 구현할 수 있지만,

위 방식엔 몇 가지 문제점이 있다.

element에 id 또는 class를 할당해야된다.
입력 필드와 p 태그와 같은게 수십개, 수백개가 된다면?

코드가 복잡해질 것이다.

반응성을 통해 이 문제를 간단하게 해결할 수 있다.

문서의 데이터가 업데이트되면 자바스크립트 코드의 데이터도 업데이트 된다.
자바스크립트의 데이터가 업데이트되면 문서의 데이터도 업데이트 된다.

크롬 개발자창에 콘솔창에서

vm.firstname = 'xxxxx'

위와 같이 입력하면 문서 화면도 업데이트된다.

# 19. 2 way data binding

19. 2 way data binding