mounted()란?

mounted()

mounted()는 Vue.js의 라이프사이클 훅 중 하나이며, 컴포넌트의 인스턴스가 DOM에 마운트된 후에 호출된다.

 

mounted() 훅은 컴포넌트의 템플릿이 DOM에 삽입된 후 실행되기 때문에 DOM 요소에 접근할 수 있는 시점이다. 그래서 이 훅을 사용하면 DOM 조작이나 외부 라이브러리 초기화와 같은 작업을 안전하게 수행할 수 있다고 한다.

 

예시)

<template>
  <div>
    <MainCategory />
    <div class="main-text">
      <h1 class="text"></h1>
      <span class="blink"></span>
    </div>
  </div>
</template>

<script>
import MainCategory from "../components/MainCategory";

export default {
  name: "HomePage",
  components: {
    MainCategory,
  },
  data() {
    return {};
  },
  mounted() {
    const content = "안녕하세요 문미새 블로그 입니다.";
    const text = document.querySelector(".text");
    let i = 0;

    function typing() {
      if (text) {
        let txt = content[i++];
        text.innerHTML += txt === "\n" ? "<br/>" : txt;
        if (i > content.length) {
          text.textContent = "";
          i = 0;
        }
      }
    }
    setInterval(typing, 200);
  },
};
</script>

<style>
.main-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2rem;
  text-align: center;
  height: 7rem;
}

.blink {
  animation: blink 0.5s infinite;
  font-size: 1.2rem;
}

@keyframes blink {
  to {
    opacity: 0;
  }
}
</style>

 

이 코드에서 mounted의 역할은 화면이 다 렌더링 된 후에 mounted() 함수가 실행이 된다.

 

즉, DOM으로 접근할 때 함수가 먼저 실행되는 것을 방지하기 때문에 접근 객체를 못 찾는 에러를 예방할 수 있다.