SeouliteLab

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

카테고리 없음

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

Seoulite Lab 2024. 4. 26. 08:15

Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. beforeMount 훅은 컴포넌트가 DOM에 마운트되기 전에 호출됩니다. 이 훅을 사용하면 컴포넌트가 실제로 화면에 그려지기 전에 필요한 작업을 수행할 수 있습니다.

예를 들어, beforeMount 훅을 사용하여 컴포넌트가 마운트되기 전에 외부 API로부터 데이터를 가져오거나, 동적으로 DOM을 조작하는 등의 작업을 수행할 수 있습니다.

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

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

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      beforeMount: function() {
        // 컴포넌트가 마운트되기 전에 실행될 로직
        console.log('컴포넌트가 마운트되기 전입니다.');
        // 외부 API로부터 데이터를 가져와서 메시지 설정
        setTimeout(() => {
          this.message = 'Vue.js 앱이 성공적으로 마운트되었습니다.';
        }, 2000); // 2초 후에 메시지 설정
      }
    });
  </script>
</body>
</html>

위 예제에서 beforeMount 훅은 Vue 인스턴스가 DOM에 마운트되기 전에 실행됩니다. 이 시점에서는 아직 컴포넌트가 화면에 그려지기 전이므로, DOM 조작 및 초기 데이터 설정 등의 작업을 수행할 수 있습니다. 위 예제에서는 2초 후에 message 데이터가 변경되어 화면에 표시됩니다.

beforeMount 훅을 사용하면 컴포넌트가 화면에 실제로 그려지기 전에 필요한 작업을 수행할 수 있습니다.

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