[vue/js] Vue 의 컴포넌트 Mount

Vue의 라이프사이클

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

지금까지는 ref()라는 함수를 통해서 DOM 요소의 내용이 바뀔 때, 자동으로 DOM 업데이트를 수행했습니다. 하지만 결국에는 DOM 을 수동으로 다루어야 하는 경우가 생길 수 있습니다.

js 코드가 실행되는 시점에서는 아직 화면에 html 요소가 그려지기 전입니다. 따라서 이때, ref를 통해서 p태그에 접근하려고 하면, 연결할 대상이 없기 때문에, null이 나옵니다. 화면 그리기가 끝난 후에야 비로소 실제 요소와 제대로 연결 됩니다.

그렇다면, 화면 그리기가 끝났을 때의 시점을 알 필요가 있습니다. 그때 사용하는 이벤트가 onMounted 입니다.

그리고, 만약 컴포넌트를 html에서 내릴때 수행해야 하는 행동이 있을 수 있습니다. 그럴때 사용하는 이벤트가 onUnmounted 입니다.

사용하는 방법은 다음과 같습니다.

<script setup>

//지금까지 Vue는 반응성과 선언적 렌더링 덕분에 DOM 업데이트를 자동을 수행했음
//하지만 결국에는 DOM을 수동으로 다루어야 하는 경우가 생길 수 있음
//script 영역에서 사용하는 ref가 아닌, template에서 ref를 속성으로 사용할 수 있음
//template ref는 템플릿 내의 요소에 대한 참조임
//즉, ref 변수에 DOM 안에 있는 요소를 찾아서 넣을때 사용하는듯
//querySelector나 getElement 와 같은걸 안쓰고 Vue 만의 방식인듯
//처음에 null로 초기화 하는 이유는 template이 생성되기 전이라 그럼
//template이 생성되고 나서, pElementRef를 찾아서 넣는 방식이라고 보면 됨
import { onMounted, ref } from 'vue';
const pElementRef = ref(null);
console.log("pElementRef: " + pElementRef.value);

onMounted(() => {
    //컴포넌트가 마운트 되고 나서 실행되는 영역
    //컴포넌트가 마운트 되었다면, 이제 p 태그를 찾아서 불러올 수 있음.
    //따라서 로그 찍어보면 이제 p 요소가 나옴
    console.log("pElementRef: " + pElementRef.value);
})
</script>

<template>
    <p ref="pElementRef">ㅎㅇ</p>
</template>

<style></style>

처음에 js 코드에서 p태그를 ref로 선언하고 난 뒤, console.log를 찍어보면, null이 나옵니다. onMounted 이벤트를 사용하고 나서 확인해보면, console.log 에 p태그가 찍히는것을 볼 수 있습니다.