Vue.js의 Lifecycleκ³Ό Hook πŸ§ƒ

μ§€ν˜„Β·2023λ…„ 2μ›” 15일
0

Vue

λͺ©λ‘ 보기
1/1

lifecycle

Vue μΈμŠ€ν„΄μŠ€λ‚˜ μ»΄ν¬λ„ŒνŠΈκ°€ 생성될 λ•Œ 거치게 λ˜λŠ” κ³Όμ •
μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λœ ν›„ 우리 λˆˆμ— 보여지고, μ‚¬λΌμ§€κΈ°κΉŒμ§€μ˜ 단계

1. 생성 create

  • λ°μ΄ν„°λ§Œ μ‘΄μž¬ν•˜λŠ” 단계

2. DOM에 λΆ€μ°© mount

  • <template> 사이에 있던 것을 HTML둜 λ°”κΏ”μ£Όκ³  μ»΄ν¬λ„ŒνŠΈ 생성 λ‹¨κ³„μ—μ„œ index.html에 λΆ€μ°©ν•œλ‹€

3. μ—…λ°μ΄νŠΈ update

  • 데이터가 λ³€ν•˜λ©΄ μ»΄ν¬λ„ŒνŠΈκ°€ μž¬λ Œλ”λ§!

4. 없어진닀! destroy

  • μ»΄ν¬λ„ŒνŠΈ μ‚­μ œ~

Lifecycle Hook

라이프사이클 λ‹¨κ³„λ§ˆλ‹€ 싀행될 수 μžˆλŠ” ν•¨μˆ˜μ™€ 같은 라이프사이클 ν›…
Hook을 κ±Έμ–΄μ„œ 라이프사이클 쀑간에 μ›ν•˜λŠ” μ½”λ“œλ₯Ό μ‹€ν–‰ κ°€λŠ₯ν•˜λ‹€

  • <script> 뢀뢄에 μž‘μ„±ν•˜λ©΄ λœλ‹€
  • beforeCreate, created, beforeMount, mounted, beforeUpdate(), updated, beforeUnmount, unmounted

1. Create

  • μ»΄ν¬λ„ŒνŠΈ μ΄ˆκΈ°ν™” 단계
  • λΌμ΄ν”„μ‚¬μ΄ν΄μ—μ„œ κ°€μž₯ λ¨Όμ € μ‹€ν–‰!
  • DOM μΆ”κ°€ 되기 μ „ / μ„œλ²„ λ Œλ”λ§ 쀑에도 μ‹€ν–‰

-> ν΄λΌμ΄μ–ΈνŠΈ&μ„œλ²„ λ Œλ”λ§ κ³Όμ • λͺ¨λ‘μ—μ„œ μ»΄ν¬λ„ŒνŠΈ μ„€μ •ν•  ν•„μš” μžˆλ‹€λ©΄ μ—¬κΈ°μ„œ 처리

beforeCreate

export default{
    data() {
        return {
            msg: 'hello';
        }
    },
    beforeCreate(){
        console.log(this.msg); // undefined! μ ‘κ·Ό λΆˆκ°€
    }
}
  • κ°€μž₯ λ¨Όμ € μ‹€ν–‰
  • Vue μΈμŠ€ν„΄μŠ€ μ΄ˆκΈ°ν™” 된 직후에 λ°œμƒ!
  • μ»΄ν¬λ„ŒνŠΈκ°€ DOM에 μΆ”κ°€λ˜κΈ° 전이라 data, method 등에도 μ ‘κ·Ό λΆˆκ°€

created

  • ν…œν”Œλ¦Ώ 및 가상 DOM λΆ€μ°© 전에 μ‹€ν–‰!

  • data, event ν™œμ„±ν™”λ˜μ–΄ μ ‘κ·Ό κ°€λŠ₯

  • 데이터 μ΄ˆκΈ°ν™”μ‹œμ— μ‚¬μš©

  • λΆ€λͺ¨ > μžμ‹ 순으둜 created ν›… μ‹€ν–‰


2. Mount

  • DOM λΆ€μ°© 단계
  • κ°€μž₯ 많이 μ‚¬μš©! 초기 λ Œλ”λ§ 전후에 λ°”λ‘œ μ»΄ν¬λ„ŒνŠΈμ— μ ‘κ·Ό κ°€λŠ₯
  • μ„œλ²„ λ Œλ”λ§ μ‹€ν–‰λ˜λŠ” λ™μ•ˆμ—λŠ” μ‹€ν–‰λ˜μ§€ μ•ŠλŠ”λ‹€

-> 초기 λ Œλ”λ§ 직전. 직후에 DOM μ ‘κ·Όν•˜κ±°λ‚˜ μˆ˜μ •ν•  λ•Œ μ‚¬μš©

beforeMount

export default{
  beforeMount(){
        console.log('beforeMount'); // undefined! μ ‘κ·Ό λΆˆκ°€
    }
}
  • DOM에 λΆ€μ°©ν•˜κΈ° 직전에 호좜!
  • ν…œν”Œλ¦Ώ 유무 ν™•μΈν•œ ν›„ ν…œν”Œλ¦Ώ λ Œλ”λ§ ν•œ μƒνƒœ
  • 가상 DOM μƒμ„±λœ μƒνƒœμ§€λ§Œ μ‹€μ œ DOM에 λΆ€μ°©λ˜μ§€ μ•Šμ€ μƒνƒœ

3. Update

  • μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ“°λŠ” λ°˜μ‘ν˜• 속성듀이 λ³€κ²½λ˜κ±°λ‚˜ λ¦¬λ Œλ”λ§ 될 λ•Œ 호좜!

-> μ»΄ν¬λ„ŒνŠΈκ°€ λ‹€μ‹œ λ Œλ”λ§λ˜λŠ” μ‹œκΈ°λ₯Ό μ•Œμ•„μ•Ό ν•˜λŠ” κ²½μš°μ— μ‚¬μš©

beforeUpdate

export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
    // Logs the counter value every second, before the DOM updates.
    console.log(this.counter)
  }
}
  • μ»΄ν¬λ„ŒνŠΈ 데이터 λ³€κ²½λ˜κ³  DOM λ‹€μ‹œ λ Œλ”λ§ 되기 전에 μ‹€ν–‰
  • λ Œλ”λ§ 되기 전에 데이터 μ‹ κ·œ μƒνƒœ κ°€μ Έμ™€μ•Όν•˜λŠ” κ²½μš°μ— μ‚¬μš©

updated

  • μ»΄ν¬λ„ŒνŠΈ 데이터가 λ³€κ²½λ˜μ–΄ DOM이 λ¦¬λ Œλ”λ§ 된 ν›„ μ‹€ν–‰!

Destroy

  • μ»΄ν¬λ„ŒνŠΈ ν•΄μ²΄λ˜κ³  DOMμ—μ„œ 제거될 λ•Œ μ‹€ν–‰λœλ‹€!

beforeDestroy

  • 해체 직전에 μ‹€ν–‰
  • μ»΄ν¬λ„ŒνŠΈλŠ” μ—¬μ „νžˆ μ‘΄μž¬ν•˜κ³  μž‘λ™ν•œλ‹€
  • 이벀트 λ¦¬μŠ€λ„ˆ λ“± μ •λ¦¬ν•˜λŠ”λ°μ— μ‚¬μš©
export default {
  beforeDestroy() {
    console.log('beforeDestory');
  }
}

destroyed

  • μ»΄ν¬λ„ŒνŠΈ ν•΄μ²΄λœ ν›„ 호좜
  • μ»΄ν¬λ„ŒνŠΈ 파괴된 것을 원격 μ„œλ²„μ— μ•Œλ €μ•Ό ν•˜λŠ” 경우 μ‚¬μš©!

Reference ✍
https://vuejs.org/guide/essentials/lifecycle.html

profile
μ œλ‘œλΆ€ν„° μ‹œμž‘ν•˜λŠ” 개발자 μƒν™œ (β‘…Β΄β€’βŒ”β€’`)

0개의 λŒ“κΈ€