๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • What would life be If we had no courage to attemp anything?
Development/Vue.js

Vue.js - Lifecycle Hooks

by DevIseo 2022. 5. 7.

๐Ÿ””Lifecycle Hooks

  • ๊ฐ Vue ์ธ์Šคํ„ด์Šค๋Š” ์ƒ์„ฑ๋  ๋•Œ ์ผ๋ จ์˜ ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์นจ
    • ์˜ˆ๋ฅผ ๋“ค์–ด ๋ฐ์ดํ„ฐ ๊ด€์ฐฐ ์„ค์ •์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ, ์ธ์Šคํ„ด์Šค๋ฅผ DOM์— ๋งˆ์šดํŠธํ•˜๋Š” ๊ฒฝ์šฐ, ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด DOM๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒฝ์šฐ ๋“ฑ
  • ๊ทธ ๊ณผ์ •์—์„œ ์‚ฌ์šฉ์ž ์ •์˜ ๋กœ์ง์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” Lifecycle Hooks๋„ ํ˜ธ์ถœ๋จ
  • ๊ณต์‹๋ฌธ์„œ๋ฅผ ํ†ตํ•ด ๊ฐ ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์˜ ์ƒ์„ธ ๋™์ž‘์„ ์ฐธ๊ณ 

|Lifecycle Hooks์˜ ์˜ˆ์‹œ

<body>
  <div id="app">
    <img v-if="imgSrc" :src="imgSrc" alt="sample img">
    <button @click="getImg">GetDog</button>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const API_URL = 'https://dog.ceo/api/breeds/image/random'
    const app = new Vue({
      el: '#app',
      data: {
        imgSrc: '',
      },
      methods: {
        getImg: function () {
          axios.get(API_URL)
            .then(response => {
              this.imgSrc = response.data.message
            })
        }
      },
      //์™ธ๋ถ€ API์—์„œ ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ
      created: function(){
        this.getImg()
      }
    })
  </script>
</body>
  • created hook์€ vue ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋œ ํ›„์— ํ˜ธ์ถœ ๋จ
  • created๋ฅผ ์‚ฌ์šฉํ•ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ๋ฅผ API ์š”์ฒญ์„ ํ†ตํ•ด ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Œ
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'Development > Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Vue.js - Vue CLI  (0) 2022.05.09
Vue.js - SFC(Single File Component)  (0) 2022.05.09
Vue.js - Template Syntax  (0) 2022.05.07
Vue.js - Vue Instance  (0) 2022.05.07
Vue.js - SPA, CSR,SSR,SEO,Vue.js์˜ ๊ฐœ๋…๊ณผ ์—ญํ• , MVVM  (0) 2022.05.07

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”