μΈμŠ€ν„΄μŠ€ 라이프 사이클

μΈμŠ€ν„΄μŠ€ 라이프 μ‚¬μ΄ν΄μ΄λž€ 뷰의 μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜μ–΄ μ†Œλ©Έλ˜κΈ°κΉŒμ§€ κ±°μΉ˜λŠ” 과정을 μ˜λ―Έν•©λ‹ˆλ‹€. μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜κ³  λ‚˜λ©΄ 라이브러리 λ‚΄λΆ€μ μœΌλ‘œ λ‹€μŒκ³Ό 같은 과정이 μ§„ν–‰λ©λ‹ˆλ‹€.

  • data μ†μ„±μ˜ μ΄ˆκΈ°ν™” 및 κ΄€μ°° (Reactivity μ£Όμž…)
  • λ·° ν…œν”Œλ¦Ώ μ½”λ“œ 컴파일 (Virtual DOM -> DOM λ³€ν™˜)
  • μΈμŠ€ν„΄μŠ€λ₯Ό DOM에 λΆ€μ°©

라이프 사이클 λ‹€μ΄μ–΄κ·Έλž¨

μΈμŠ€ν„΄μŠ€μ˜ 라이프 사이클 흐름을 그림으둜 λ‚˜νƒ€λ‚΄μ–΄ 보면 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

μ½˜μ†”μ—μ„œ ν™•μΈν•œ μΈμŠ€ν„΄μŠ€ λ‚΄μš©

라이프 사이클 ν›…

뷰의 라이프 사이클을 이해해야 ν•˜λŠ” μ΄μœ λŠ” λ°”λ‘œ 라이프 사이클 ν›… λ•Œλ¬Έμž…λ‹ˆλ‹€. 라이프 사이클 ν›…μœΌλ‘œ μΈμŠ€ν„΄μŠ€μ˜ νŠΉμ • μ‹œμ μ— μ›ν•˜λŠ” λ‘œμ§μ„ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, μ»΄ν¬λ„ŒνŠΈκ°€ μƒμ„±λ˜μžλ§ˆμž 데이터λ₯Ό μ„œλ²„μ—μ„œ λ°›μ•„μ˜€κ³  μ‹ΆμœΌλ©΄ createdλ‚˜ beforeMount 라이프 사이클 훅을 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜ μ½”λ“œλŠ” μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜μžλ§ˆμž μ•‘μ‹œμ˜€μŠ€λ‘œ HTTP GET μš”μ²­μ„ 보내 데이터λ₯Ό λ°›μ•„μ˜€λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

new Vue({
  methods: {
    fetchData() {
      axios.get(url);
    }
  },
  created: function() {
    this.fetchData();
  }
})

자주 μ‚¬μš©λ˜λŠ” 라이프 사이클 ν›… λͺ©λ‘

κ΅¬ν˜„ν•  λ•Œ 주둜 μ‚¬μš©ν•˜λŠ” 라이프 사이클 훅은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

λ‹€λ₯Έ 라이프 사이클 훅을 μ•Œκ³  μ‹Άλ‹€λ©΄ μ—¬κΈ°λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.