한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

폼 입력 바인딩

1. 단방향 데이터 바인딩

아래 코드와 같이 script 태그로 데이터 연결하여 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다. 이러한 단방향 데이터 바인딩은 input 내 내용을 수정한다하더라도 수정된 내용이 msg 데이터를 갱신되지 않습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-bind:value="msg" />  => :value="msg"로 변경. (v-bind의 약어) : text입력시 사용
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

msg를 통해 value부분에 데이터가 연결될 수 있도록 정리.

<template>
  <input
    type="text"
    value="Hello world!" />
</template>

<script>
export default {
  data() {
    return {      
    }
  }
}
</script>

2. 양방향 데이터 바인딩

2-1 개념

사용자가 화면에 입력한 내용이 실제로 msg 데이터에도 영향을 줄 수 있고, 이 데이터가 input요소에 영향을 주고 input요소에서 바뀐 내용이 다시 데이터에 영향을 미치는 아래와 같은 내용이 양방향 데이터 바인딩입니다.

<template>
  {{ msg }}
  <input 
    type="text"
    :value="msg"
    @input="handler" />  //@input이라는 이벤트를 연결, 이벤트가 연결되면 handler라는 메소드 실행 , @input이벤트란 input창에 어떤 데이터가 연결되는 상황을 이야기합니다.
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    handler(e){
      console.log(e.target.value)  //인풋창에 글자가 입력되면 입력된 글자가 출력
      this.msg = e.target.value  //h1태그에 있는 msg도 갱신되는 것을 확인할수 있다.
    }
  }
}
</script>

위처럼 inut요소를 통해 사용자가 어떠한 데이터를 입력했을 때, handler라는 메소드가 입력된 데이터에 이벤트 객체를 받아서, msg의 데이터에 $event.target.value를 할당합니다. 이렇게 하면 msg의 데이터가 갱신되었기 떄문에 갱신된 데이터가 다시 html에 msg라는 이름으로 연결되어 있는 각각의 부분에 반영이 되어서 반응성을 통해 화면에도 갱신된 데이터가 출력되게 됩니다.

이러한 개념이 바로 데이터가 양쪽으로 흐르는 양방향 데이터 바인딩이라는 것입니다.

2-2 양방향 데이터 바인딩 간소화 (1)

vue.js에서는 이렇게 구현한 내용을 조금 더 간소화시키는 방안을 제공해주고 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="msg=$event.target.value" />  //메소드가 아닌 인라인 방식으로 작성.
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}   //html의 부분에 인라인 방식으로 정리를 했기 때문에 더이상 method부분 불필요
</script>

2-3 v-model 디렉티브 : 양방향 데이터 바인딩 간소화 (2)

이러한 내용을 v-model이라는 디렉티브를 이용해 양방향 데이터 바인딩을 훨씬 간소화해 구현해줄 수 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
</template>

예제2

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
  <input
    type="checkbox"
    v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
      checked: false
    }
  }
}
</script>

체크박스를 클릭하게 되면, 해당하는 요소에 연결되어 있는 checked라는 해당 데이터는 v-model이라는 디렉티브를 통해서 양방향 데이터 바인딩이 되어 있기 때문에 실제로 checked라는 데이터가 false가 아니라 true로 바뀌었을 것입니다.

이를 확인해보기 위해서, checked라는 데이터를 화면에 출력해보도록 하겠습니다

  <h1>{{ checked }}</h1>

v-model 디렉티브를 이용해서 기타 사용할 수 있는 여러가지 input요소들에 손쉽게 데이터를 연결해 사용할 수 있습니다.

2-4 v-model 주의사항

다만, 사용할 때 약간의 주의사항이 있습니다. 아래와 같이 input박스에 한글을 입력하게 되면 하나의 단어가 완성되기 전까지는 화면에 반영되지 않는 것을 확인할 수 있습니다.

따라서 한글을 입력할 때는 v-model이 아니고 기존에 이용했던 value라는 데이터의 단방향 데이터로 메세지를 연결해주고 input이라는 이벤트를 통해서 target.value를 이벤트라는 객체에 다시 할당하는 것으로 만들어 줄 수 있습니다.

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>