๊ฒฐํ•ฉ๋ ฅ ๋†’์€ ์ปดํฌ๋„ŒํŠธ

๋‘ ๋ฒˆ์งธ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ ํŒจํ„ด์˜ ํ•ต์‹ฌ์€ v-model ๋””๋ ‰ํ‹ฐ๋ธŒ์ž…๋‹ˆ๋‹ค. v-model์˜ ๋‚ด๋ถ€๊ฐ€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ณ  ์ด๋ฅผ ์‘์šฉํ•˜์—ฌ ์ข€ ๋” ๊ฒฐํ•ฉ๋ ฅ์ด ๋†’์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

v-model ๋””๋ ‰ํ‹ฐ๋ธŒ

v-model ๋””๋ ‰ํ‹ฐ๋ธŒ๋Š” ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ์ง€์›ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด๋ž€ ํ™”๋ฉด์˜ ๋ฐ์ดํ„ฐ์™€ ๋ทฐ ์ธ์Šคํ„ด์Šค์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•ญ์ƒ ์ผ์น˜ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<template>
  <input type="text" v-model="inputText">
</template>

<script>
export default {
  data() {
    return {
      inputText: 'hi'
    }
  }
}
</script>

์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์ธํ’‹ ๋ฐ•์Šค์˜ ์ดˆ๊ธฐ ๊ฐ’์œผ๋กœ 'hi'๊ฐ€ ์ง€์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ธํ’‹ ๋ฐ•์Šค์˜ ๋‚ด์šฉ์„ ๋ฐ”๊พธ๋ฉด inputText์˜ ๊ฐ’๋„ ๊ฐ™์ด ๋ฐ”๋€๋‹ˆ๋‹ค. ํ•ด๋‹น ๋‚ด์šฉ์€ ๋ทฐ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

v-model ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๋™์ž‘ ๋ฐฉ์‹

๊ทธ๋Ÿผ ์œ„์—์„œ v-model ๋””๋ ‰ํ‹ฐ๋ธŒ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ทฐ ์ธ์Šคํ„ด์Šค์˜ ๋ฐ์ดํ„ฐ์™€ ์ •๋ณด๋ฅผ ์ฃผ๊ณ  ๋ฐ›์•˜์„๊นŒ์š”? v-model ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๋‚ด๋ถ€๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

<template>
  <input type="text" :value="inputText" @input="inputText = $event.target.value">
</template>

<script>
export default {
  data() {
    return {
      inputText: 'hi'
    }
  }
}
</script>

inputText์˜ ๊ฐ’์„ :value์— ์—ฐ๊ฒฐํ•˜๊ณ  ์ธํ’‹ ๋ฐ•์Šค์˜ ์ž…๋ ฅ์„ ๋ชจ๋‘ $event.target.value๋กœ inputText์— ๋„ฃ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋Š” v-model ๋””๋ ‰ํ‹ฐ๋ธŒ์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋Š” ์ปค์Šคํ…€ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

v-model๋กœ ์ฒดํฌ ๋ฐ•์Šค ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ

์•ž์—์„œ ์‚ดํŽด๋ณธ v-model๋กœ HTML ์ธํ’‹ ์ฒดํฌ ๋ฐ•์Šค๋ฅผ ์ปดํฌ๋„ŒํŠธํ™” ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ App.vue์˜ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

<!-- App.vue -->
<template>
  <check-box v-model="checked"></check-box>
</template>

<script>
import CheckBox from './CheckBox.vue';

export default {
  components: {
    CheckBox
  },
  data() {
    return {
      checked: false,
    }
  }
}
</script>

์ด์–ด์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋“ฑ๋ก๋œ CheckBox.vue์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<!-- CheckBox.vue -->
<template>
  <input type="checkbox" :value="value" @click="toggle">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    toggle() {
      this.$emit('input', !this.value);
    }
  }
}
</script>

์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์ฒดํฌ ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜๋ฉด checked ๊ฐ’์ด ์ •์ƒ์ ์œผ๋กœ true์—์„œ false๋กœ ์ „ํ™˜๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.