SeouliteLab

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

카테고리 없음

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

Seoulite Lab 2024. 4. 26. 08:15

Vue.js에서는 컴포넌트의 라이프사이클 동안 다양한 훅(hook)을 제공합니다. created 훅은 컴포넌트가 생성된 직후에 호출됩니다. 이 시점에서 컴포넌트는 DOM에 마운트되었고, 데이터 감시 및 이벤트/감시자 설정이 완료되어 있습니다.

created 훅은 초기 데이터를 가져오거나 외부 리소스와의 통신을 시작하는 데 유용합니다. 또한 컴포넌트 인스턴스가 완전히 초기화되었으므로, 데이터 및 컴포넌트 메서드에 접근할 수 있습니다.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue created 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: ''
      },
      created: function() {
        // 컴포넌트가 생성된 직후에 실행될 로직
        console.log('컴포넌트가 생성된 직후입니다.');
        // 초기 데이터 가져오기 또는 외부 리소스와의 통신 시작
        this.message = 'Vue.js 앱이 성공적으로 생성되었습니다.';
      }
    });
  </script>
</body>
</html>

위 예제에서 created 훅은 Vue 인스턴스가 생성된 직후에 실행됩니다. 이 시점에서 초기 데이터를 가져오거나 외부 리소스와의 통신을 시작할 수 있습니다. 이후 message 데이터가 변경되어 화면에 표시됩니다.

created 훅을 이용하면 컴포넌트가 생성된 직후에 필요한 초기화 작업을 수행할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)