[Vue] 라이프사이클 Mounted 란? 언제 써야할까

🚀 mounted 란?

- 컴포넌트가 화면 DOM에 완전 추가된 후 실행하는 함수.

 

컴포넌트 생성 ▶️ 가상 DOM에 렌더링 ▶️ 브라우저에 화면 그려짐 ▶️ mounted 실행 ✨

 

HTML이 화면에  그려진 후, 실행되는 함수.

보통 데이터를 불러오거나 DOM을 직접 조작해야할 때 사용.

 

 

 

 

 

예시 1 ) 화면에 표시된 후 API에서 데이터 가져오기

 <div>{{ message }}</div>

data() {
    return {
      message: "로딩 중...",
      // 처음엔 data의 message는 "로딩 중..."라고 적용 됨. 
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = "데이터 불러옴!";
    }, 2000); // 2초 후 데이터 message에 값 변경
  }

 

 

 

 

예시 2 ) DOM 요소 조작하기 (ref 사용)

  <h1 ref="title">안녕하세요!</h1>

 mounted() {
    this.$refs.title.style.color = "blue";
    // ref와 연결된 title 영역 색상을 파란색으로 변경
  }

 

 

 

 

 

예시 3 ) localStorage에서 값 가져오기

  <p>안녕하세요, {{ username }}님!</p>

data() {
    return {
      username: "",
    };
},
mounted() {
    this.username = localStorage.getItem("username") || "손님";
    // 로컬스토리지에 'username' key가 있으면 값을 username에 적용
    // 없으면 '손님'으로 적용
}

 

 

 

 

 

❌ mounted를 사용하면 안 되는 경우

1. 데이터가 준비되기 전 필요한 작업

- mounted는 화면이 나타난 후 실행되므로, 데이터가 필요하기 전 코드라면 created를 사용.

 

2. SSR (Server-Side Rendering) 환경

- mounted는 브라우저에서만 실행 됨.

- 서버에서는 실행이 안되기 때문에, SSR환경 (Vue  + Nuxt.js)에서는 주의