๐Ÿ“š Vue.js ๊ธฐ๋ณธ (็”Ÿ๊ธฐ์ดˆ)

chajaneeยท2020๋…„ 4์›” 15์ผ
9
post-thumbnail

Vue CLI๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ•™์Šต์„ ์ง„ํ–‰ํ•˜์˜€๋‹ค.
(App.vue ํŒŒ์ผ์—์„œ ์ง„ํ–‰)

ํ…œํ”Œ๋ฆฟ ๋ฌธ๋ฒ•

  • ๋ Œ๋”๋ง ๋œ DOM์„ ๊ธฐ๋ณธ Vue ์ธ์Šคํ„ด์Šค์˜ ๋ฐ์ดํ„ฐ์— ์„ ์–ธ์ ์œผ๋กœ ๋ฐ”์ธ๋”ฉ ํ•  ์ˆ˜์žˆ๋Š” HTML ๊ธฐ๋ฐ˜์˜ ๋ฌธ๋ฒ•

๋””๋ ‰ํ‹ฐ๋ธŒ

  • ํ…œํ”Œ๋ฆฟ ๋‚ด๋ถ€์˜ v- ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์†์„ฑ์œผ๋กœ ํ…œํ”Œ๋ฆฟ๊ณผ ๋กœ์ง์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค.
    (์ฃผ๋กœ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ๊ณผ ๊ด€๋ จ๋œ ์ฒ˜๋ฆฌ๋ฅผ ์‹ค์‹œ)
  • ์ด๋Ÿฐ ์†์„ฑ์€ DOM์— ๋ฐ˜์˜๋˜๊ธฐ ์ „์— Vue.js์— ์˜ํ•ด ์ปดํŒŒ์ผ ๋˜๋ฉฐ, ์ดํ›„์—๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋œ๋‹ค.

๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด, ๋ Œ๋”๋ง ๋‚ด์šฉ๋„ ํ•จ๊ป˜ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ
    (๋ฐ์ดํ„ฐ์™€ ๋ Œ๋”๋ง์„ ๋™๊ธฐํ™”ํ•˜๋Š” ๊ตฌ์กฐ)

ํ…์ŠคํŠธ ๋ฐ”์ธ๋”ฉ

์†์„ฑ ์ด๋ฆ„์„ ์ž‘์„ฑํ•˜๋ฉด, ํ•ด๋‹น ์œ„์น˜์˜ ๊ฐ’๋„ ๊ฐ’์ด ๋ Œ๋”๋ง ๋œ๋‹ค.

ํ…์ŠคํŠธ ๋ฐ”์ธ๋”ฉ์„ ๋ ˆ์•Œ ํ•ตํ•ตํ•ตํ•ตํ•ตํ•ต ๊ธฐ์ดˆ ์ค‘์˜ ๊ธฐ์ดˆ์ด๋‹ค.

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '๊ฐœ๋ฐœ์žฌ๋ฐŒ๋„ค',
      }
    }
  }
</script>

๋ฐ˜๋ณต ๋ Œ๋”๋ง

๋ชฉ๋ก ๋ฆฌ์ŠคํŠธ๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ๋Š”data ์˜ต์…˜์— ๋“ฑ๋กํ•œ
๋ฐฐ์—ด, rorcpdp v-for ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜๋ณต ๋ Œ๋”๋งํ•œ๋‹ค.

์ค‘์š”!
2.2.0 ์ด์ƒ์—์„  v-for๋Š” key๊ฐ€ ๊ถŒ์žฅ์‚ฌํ•ญ! key์˜ ๊ฐ’์€ ๊ธฐ๋ณธ ํƒ€์ž…(primitive value)๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Vue์—์„œ ๊ฐœ๋ณ„ DOM ๋…ธ๋“œ๋“ค์„ ์ถ”์ ํ•˜๊ณ  ๊ธฐ์กด ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์žฌ์‚ฌ์šฉ, ์žฌ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ
v-for์˜ ๊ฐ ํ•ญ๋ชฉ๋“ค์— ๊ณ ์œ ํ•œ key ์†์„ฑ์„ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
key์— ๋Œ€ํ•œ ์ด์ƒ์ ์ธ ๊ฐ’์€ ๊ฐ ํ•ญ๋ชฉ์„ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ID์ž…๋‹ˆ๋‹ค.

<template>
  <div>
    <ol>
      <li v-for="item in list" v-bind:key="item.id">{{ item }}</li>
    </ol>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // message: '๊ฐœ๋ฐœ์žฌ๋ฐŒ๋„ค',
        list: ['๐Ÿ‘ฉ๐Ÿผ์˜ˆ๋‚˜๋ฅด', '๐Ÿ‘ฑ๐Ÿปโ€โ€์ œ์ด์Šจ', '๐Ÿ™‹๐Ÿปโ€์ฐจ์ฐจ']
      }
    }
  }
</script>

์›œ๋ซ„?! ์ฐจ์ฐจ ์ด๋ชจํ‹ฐ์ฝ˜ ๋ฐ”๊พผ๊ฑธ๋กœ ์บก์ณ๋ฅผ ์•ˆํ•ด์‚ฃ๋„ค.. ํ•ณํžฃ

์ด๋ฒคํŠธ

ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์š”์†Œ๊ฐ€ ๋ณ€๊ฒฝ๋œ๋‹ค ์ฒ˜๋Ÿผ DOM ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ(์ด๋ฒคํŠธ ์—ฐ๊ฒฐ) ์‹œ์—๋Š”
v-on ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
์š”๋†ˆ ๋Œ€์‹ ์— @click="handleClick" ์„ ์‚ฌ์šฉํ•ด๋„ ๊ฒฐ๊ณผ๋Š” ๋˜‘๊ฐ™๋‹ค.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button v-on:click="handleClick">๋ˆŒ๋Ÿฌ๋ˆŒ๋Ÿฌ๋ฒ„ํŠผ</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '๊ฐœ๋ฐœ์žฌ๋ฐŒ๋„ค',
      }
    },
    methods: {
      handleClick() {
        this.message = '์—ด์‹ฌํžˆํ•˜์ฆˆ์•„!'
      }
    }
  }
</script>

๋ฐ์ดํ„ฐ๋ž‘ ์ž…๋ ฅ์–‘์‹(input) ๋™๊ธฐํ™”

v-model ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ์™€ ์ž…๋ ฅ ์–‘์‹ ํ•ญ๋ชฉ์„ ๋™๊ธฐํ™” ์‹œ์ผœ๋ณด์ž.

์ž…๋ ฅ ๋˜๋Š” ์„ ํƒ์„ ํ•˜๋ฉด ์ฆ‰์‹œ ๋ฐ์ดํ„ฐ์™€ DOM์— ๋ฐ˜์˜๋œ๋‹ค.
๋นผ์•ฐ!

<template>
  <div>
    <h1>{{ message }}</h1>
    <button v-on:click="handleClick">๋ˆŒ๋Ÿฌ๋ˆŒ๋Ÿฌ๋ฒ„ํŠผ</button>
    <br>
    <label>BOOM ๐Ÿ‘‰๐Ÿป
      <input v-model="message">
    </label>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '๊ฐœ๋ฐœ์žฌ๋ฐŒ๋„ค',
      }
    },
    methods: {
      handleClick() {
        this.message = '์—ด์‹ฌํžˆํ•˜์ฆˆ์•„!'
      }
    }
  }
</script>

์กฐ๊ฑด ๋ถ„๊ธฐ

v-if ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ด์šฉํ•˜๋ฉด ํ…œํ”Œ๋ฆฟ ๊ธฐ๋ฐ˜์˜ ์กฐ๊ฑด ๋ถ„๊ธฐ๋ฅผ ์‹ค์‹œํ•œ๋‹ค.
ํ•˜๋‹จ ์ฝ”๋“œ๋Š” show ์†์„ฑ์ด true ์ผ ๋•Œ๋งŒ message ๋ฅผ ๋ Œ๋”๋ง ํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ๋‹ค.

<template>
  <div>
      <button @click="show=!show">์™€๋ฆฌ๊ฐ€๋ฆฌ</button>
    <transition>
    <h1 v-if="show">{{ message }}</h1>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '๋ณด์ผ๋ž‘๋ง๋ž‘',
        show: true
      }
    }
  }
</script>

<style lang="css">
...
  .v-enter-active, .v-leave-active {
    transition: opacity 1s;
  }
  /* opacity:0์—์„œ 1๊นŒ์ง€ ํŽ˜์ด๋“œ์ธ & ํŽ˜์ด๋“œ์•„์›ƒํ•˜๊ธฐ */
  .v-enter, .v-leave-to {
    opacity: 0;
  }
</style>

์š”์ฆ˜์€ ๋ญ”๊ฐ€ ๊ฐ•์˜๋ณด๋‹ค ๋ฌธ์„œ๋ž‘ ์ฑ…์ด ๊ณต๋ถ€๊ฐ€ ๋” ์ž˜๋˜๋Š” ๋Š๋‚Œ์ ์ธ ๋Š๋‚Œ...
๋“œ๋””์–ด ์ ์  ๋‚˜์—๊ฒŒ ๋งž๋Š” ๊ณต๋ถ€๋ฒ•์„ ์ฐพ์•„๊ฐ€๋Š” ๊ฒƒ์ธ๊ฐ€?!

์—ด์‹ฌํžˆ ์‹œ๊ฐ„ ํˆฌ์žํ•œ๋งŒํผ ๋‡Œ๋ž‘ ์†์ด ๊ธฐ์–ต ์ข€ ํ•ด์คฌ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค.
์ฐจใ…์ฐจ์ฐจ์ฐจใ…์ฐจ์ฐจ์ฐจ์ฐจ์ฐจ์ฐจ ๊ฐ€์ฆˆ์•„!!!


Reference
[๋„์„œ] ๊ณ ์–‘์ด๋„ ํ• ์ˆ˜์žˆ๋Š” Vue.js (mio ์ง€์Œ / ์œค์ธ์„ฑ ์˜ฎ๊น€)
Vue.js ๊ณต์‹๋ฌธ์„œ - ๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง

profile
๐Ÿ”ฅ์ƒ์กด์„ ์œ„ํ•ด ๊ณ ๊ตฐ๋ถ„ํˆฌ ์ค‘๐Ÿ”ฅ#์Šคํƒ€ํŠธ์—… #ํ”„๋ก ํŠธ์—”๋“œ #์ธํ„ด #๊ฐœ๋ฐœ์ž #ํฌ๋ฉ”์ด์ปค์Šค ๐Ÿ’ํ•™์Šต ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ž˜๋ชป๋œ ๋ถ€๋ถ„์ด ์žˆ์„ ๊ฒฝ์šฐ ํ”ผ๋“œ๋ฐฑ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

5๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2020๋…„ 4์›” 17์ผ

๋ทฐ์— ์ž…๋ฌธํ•˜์‹ ๊ฑธ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜Žํ™”์ดํŒ…์ด์—์š”!
Vue 2.2 ์ด์ƒ ๋ฒ„์ „์—์„œ๋ถ€ํ„ฐ v-for๋ฌธ์„ ์‚ฌ์šฉํ•˜์‹ค ๋•Œ์—๋Š” v-bind:key๋กœ key๊ฐ’์„ DOM์— ๋ฐ”์ธ๋“œ ํ•ด ์ฃผ์‹œ๋Š” ๊ฒƒ์ด ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค :) key๋Š” ๋ทฐ์—์„œ ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ๋ฅผ ์ž˜ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’์ด๊ณ , ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€ํ™”๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋กœ๋“œํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์œผ๋กœ์จ ์ž์ฃผ ํ™œ์šฉ๋˜๋Š” attribute์ž…๋‹ˆ๋‹ค!

1๊ฐœ์˜ ๋‹ต๊ธ€