[Vue] Vue 정리하기(7) - lifecycle hooks(생명주기 훅)

오늘은 뷰 프론트엔드 개발에서 꼭 알아야 할 생명주기 훅에 대해 알아보겠다.

 

오늘도 마찬가지로 공식문서와 여러 블로그들을 참고했고 최대한 뷰3 기준으로 작성하겠다.

(항상 하는 얘기지만 혹시나 잘못된 정보가 있다면 댓글에 남겨주시길ㅠㅠ)

 

 

음... 공식문서에 일단 이렇게 나와있는데 내가 지금 아는 부분과 중요하다고 생각하는 부분을 중점으로 봐보자

 

일단 기본적으로 vue3 (컴포지션api) 에서 라이프사이클 훅을 사용하려면 라이프사이클 명칭 앞에 on을 붙이면 된다

ex) onMounted(), onUpdated() 등등

 

---

created

 

 

먼저 이 부분

 

내가 뷰2로 프로젝트했을 때 가장 많이 사용했던 라이프사이클 훅이 created였던 거 같다

 

근데 자세히 보면 옵션 api 에만 beforeCreate, created 가 있고

컴포지션 api 에는 setup 이라고 이미지에 나와있다

 

이 말인즉슨 뷰3에서 사용하는 컴포지션 api에서는 기존 옵션 api의 beforeCreate, created 를 setup이 대신한다고 보면 되겠다

(혹시 몰라서 구글링을 해보니 맞는 정보인 것 같다)

 

그래서 beforeCreate, created 를 쓰고 싶다면 그냥 setup안에 작성하면 된다.

 

---

mount

 

마운트 관련된 훅은 beforeMount, mounted 등이 있다

 

일단 저 두게를 알기 전에 mount가 뭔지를 알아야 하지 않을까?? 

 

mount란 컴포넌트가 DOM에 추가되고 화면에 나타나는 과정을 말한다

다른 말로 하면 가상 DOM의 내용이 실제 DOM에 부착되는 과정이라고 생각하면 되겠다

 

그래서 beforeMount는 말 그대로 마운트가 되기 전을 의미하고 (가상DOM은 생성되어 있으나 실제 DOM에 부착되지는 않은 상태)

mounted는 말 그대로 마운트가 된 상태이다

 

그래서 beforeMount에서는 엘리먼트에 접근이 불가능하고

mounted에서는 ref를 통해서 엘리먼트에 접근이 가능하다

 

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

 

 

뭐 더 복잡한 작업을 한다거나 하면 다른 훅들도 공부해봐야 하겠지만

 

지금은 크게 저 두 가지만 알아도 충분히 웬만한 기능들은 구현할 수 있다고 나는 아직 생각한다 ㅎㅎ

(사실 내가 아는 수준이 아직 여기까지임)

 

 

오늘은 vue의 라이프사이클에 대해 쪼끔 알아봤다

 

부디 도움이 됐길 바라며

 

그럼 빠이~~