SeouliteLab

[Vue.js] Vue 컴포넌트 라이프사이클 훅 - mounted 본문

카테고리 없음

[Vue.js] Vue 컴포넌트 라이프사이클 훅 - mounted

Seoulite Lab 2024. 4. 26. 08:16

Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. mounted 훅은 컴포넌트가 DOM에 성공적으로 마운트된 후에 호출됩니다. 이 시점에서는 컴포넌트가 화면에 그려진 후에 관련된 DOM 요소에 접근하거나 초기화 작업을 수행할 수 있습니다.

mounted 훅을 사용하면 컴포넌트가 화면에 완전히 그려진 후에 필요한 작업을 수행할 수 있습니다. 예를 들어, DOM 요소에 접근하여 이벤트 리스너를 추가하거나 외부 라이브러리를 초기화할 수 있습니다.

아래는 mounted 훅을 사용한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue mounted Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <button @click="handleClick">클릭하세요</button>
    <p>{{ message }}</p>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      mounted: function() {
        // 컴포넌트가 마운트된 후에 실행될 로직
        console.log('컴포넌트가 마운트된 후입니다.');
        // DOM 요소에 접근하여 초기화 작업 수행
        document.querySelector('button').style.backgroundColor = 'blue';
      },
      methods: {
        handleClick: function() {
          alert('버튼이 클릭되었습니다!');
        }
      }
    });
  </script>
</body>
</html>

위 예제에서 mounted 훅은 Vue 인스턴스가 DOM에 성공적으로 마운트된 후에 실행됩니다. 이 시점에서는 컴포넌트가 화면에 그려진 상태이므로, DOM 요소에 접근하여 초기화 작업을 수행할 수 있습니다. 위 예제에서는 버튼의 배경색을 파란색으로 변경하고, 클릭 이벤트를 처리하는 메서드를 정의했습니다.

mounted 훅을 이용하면 컴포넌트가 화면에 그려진 후에 필요한 작업을 수행할 수 있습니다.

저작자표시 비영리 변경금지