SeouliteLab

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

카테고리 없음

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

Seoulite Lab 2024. 4. 26. 08:14

Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. 이 중 beforeCreate 훅은 컴포넌트가 초기화되고 데이터 감시자 및 이벤트/감시자 설정이 아직 이루어지기 전에 호출됩니다. 이 훅을 이용하면 컴포넌트 초기화 단계에서 추가적인 로직을 실행할 수 있습니다.

예를 들어, beforeCreate 훅을 사용하여 컴포넌트가 생성되기 전에 로깅 또는 초기 데이터 설정 등의 작업을 수행할 수 있습니다.

아래는 beforeCreate 훅을 사용한 간단한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue beforeCreate 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: ''
      },
      beforeCreate: function() {
        // 컴포넌트가 생성되기 전에 실행될 로직
        console.log('컴포넌트가 생성되기 전입니다.');
        // 초기 데이터 설정
        this.message = 'Vue.js로 작성된 앱입니다.';
      }
    });
  </script>
</body>
</html>

위 예제에서 beforeCreate 훅은 Vue 인스턴스가 생성되기 전에 실행됩니다. 이 시점에 console.log를 사용하여 메시지를 출력하고, 초기 데이터로 설정한 message는 Vue 인스턴스의 데이터로 바인딩되어 화면에 표시됩니다.

이렇게 beforeCreate 훅을 활용하면 컴포넌트 초기화 전에 필요한 작업을 수행할 수 있습니다.

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