top of page
작성자 사진Hyun
6월 24일4분 분량

Vue 인스턴스란? 개념, 속성 총정리!

Vue 인스턴스 개념 이해하기

Vue 인스턴스란? 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위를 말합니다.

Vue 인스턴스는 Vue 애플리케이션의 핵심 구성 요소이며, 데이터를 정의하고, DOM 요소에 바인딩하며, 이벤트를 처리하고, 컴포넌트 간 데이터를 전달하는 등의 기능을 합니다. Vue 인스턴스는 새로운 Vue 객체를 생성함으로써 만들어집니다.


Step 1 Vue 인스턴스 생성하기

먼저 Vue 인스턴스를 간단히 생성 해볼까요? 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
var app = new Vue({
   el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

위와 같이 간단히 Vue 인스턴스를 생성하였습니다!


위 코드에서 el 속성은 Vue 인스턴스가 DOM에 연결될 요소를 지정하며, data 속성은 인스턴스의 데이터를 정의합니다. {{ message }}는 데이터 바인딩을 사용하여 message 데이터를 DOM에 표시합니다.




(해당 코드를 작성 하였을때 나타나는 화면)



Step 2 Vue 인스턴스의 주요 속성

Vue 인스턴스는 여러 속성을 가집니다. 주요 속성은 다음과 같습니다.


  • el Vue 인스턴스가 마운트될 DOM 요소를 지정합니다.


  • data Vue 인스턴스에서 사용할 데이터를 정의합니다. 이는 반응성을 가지며, 데이터가 변경되면 DOM이 자동으로 업데이트됩니다.


  • methods 인스턴스 내에서 사용할 메서드를 정의합니다. 메서드는 사용자 인터랙션에 반응하거나 데이터를 조작하는 데 사용됩니다.


  • computed 계산된 속성을 정의하여 복잡한 로직을 간단하게 표현할 수 있습니다. 이는 캐시되어 데이터가 변경될 때만 다시 계산됩니다.


  • watch 데이터 변화를 감지하여 특정 로직을 실행할 수 있습니다. 이는 특정 데이터의 변화를 감시하고 반응하는 데 유용합니다.


아래는 위 주요 속성을 확인 할 수 있는 예제 이며, 각 각의 속성마다에 특징을 확인 할 수있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app" @click="incrementCounter()">
    {{ message }}
  </div>
  <script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
    counter: 0
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    counter(newVal, oldVal) {
      console.log(`Counter changed from ${oldVal} to ${newVal}`);
    }
  }
});
  </script>
</body>
</html>

위 예제 코드를 실제 작성하여 Hello, Vue! 를 클릭시

해당 log가 나타나는 것을 확인 할 수 있습니다.


Step 3 Vue 인스턴스의 라이프사이클 훅

Vue 인스턴스는 생성, 마운트, 업데이트, 소멸의 과정을 거치며 각 단계에서 특정 훅(hook)을 사용할 수 있습니다. 라이프사이클 훅을 사용하면 특정 시점에 원하는 작업을 수행할 수 있습니다. 여기서 각 라이프사이클 훅의 역할과 사용 예시를 자세히 살펴보겠습니다.


  • beforeCreate Vue 인스턴스가 초기화되기 전에 호출됩니다. 이 단계에서는 data와 methods에 접근할 수 없습니다.


  • created Vue 인스턴스가 생성된 후 호출됩니다. 이 시점에서는 data와 methods가 초기화되어 사용할 수 있습니다.


  • beforeMount Vue 인스턴스가 DOM에 마운트되기 전에 호출됩니다. 이 단계에서는 아직 템플릿이 렌더링되지 않았습니다.


  • mounted Vue 인스턴스가 DOM에 마운트된 후 호출됩니다. 이 시점에서는 템플릿이 렌더링되어 DOM 요소에 접근할 수 있습니다.


  • beforeUpdate 데이터가 변경되어 DOM이 업데이트되기 전에 호출됩니다.


  • updated 데이터가 변경되어 DOM이 업데이트된 후 호출됩니다.


  • beforeDestroy Vue 인스턴스가 파괴되기 전에 호출됩니다. 인스턴스가 파괴되기 전에 정리 작업을 수행할 수 있습니다.


  • destroyed Vue 인스턴스가 파괴된 후 호출됩니다. 인스턴스가 완전히 파괴된 후의 작업을 처리할 수 있습니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  beforeCreate: function() {
    console.log('beforeCreate: 데이터와 메서드가 초기화되기 전에 호출됩니다.');
  },
  created: function() {
    console.log('created: Vue 인스턴스가 생성되었습니다!');
  },
  beforeMount: function() {
    console.log('beforeMount: DOM에 마운트되기 전에 호출됩니다.');
  },
  mounted: function() {
    console.log('mounted: Vue 인스턴스가 DOM에 마운트되었습니다!');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate: 데이터가 변경되어 DOM이 업데이트되기 전에 호출됩니다.');
  },
  updated: function() {
    console.log('updated: Vue 인스턴스가 업데이트되었습니다!');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy: 인스턴스가 파괴되기 전에 호출됩니다.');
  },
  destroyed: function() {
    console.log('destroyed: Vue 인스턴스가 소멸되었습니다!');
  }
});

아래 사진은 빠른 이해를 돕기 위한 예시 사진 및 동영상 입니다.


Ex1 Update)


Ex2 Destroy)





Step 4 데이터 바인딩과 반응성

Vue.js의 핵심 기능 중 하나는 데이터 바인딩과 반응성입니다. 데이터 바인딩을 통해 데이터가 변경될 때 자동으로 DOM이 업데이트됩니다. 반응성 시스템은 데이터 변경을 감지하고 필요한 업데이트를 수행합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
      </div>
      <script>
      
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!'
        }
      });
      
      </script>
  </div> 
</body>
</html>

위 예제에서 v-model 디렉티브는 양방향 데이터 바인딩을 제공합니다. 입력 필드의 값이 변경될 때 message 와 변경될 때 입력 필드의 값도 업데이트됩니다.


Step 5 메서드와 계산된 속성 사용하기

Vue 인스턴스에서는 메서드와 계산된 속성을 사용할 수 있습니다. 메서드는 인스턴스 내에서 사용할 함수를 정의하고, 계산된 속성은 데이터의 변화를 감지하여 자동으로 값을 업데이트합니다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue Instance Example</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <body>
      <div id="app">
        <p>{{ message }}</p>
        <p>Reversed Message: {{ reversedMessage }}</p>
        <p>Counter: {{ counter }}</p>
        <button @click="incrementCounter">Increment Counter</button>
      </div> 
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello, World!',
            counter: 0
          },
          methods: {
            incrementCounter() {
              this.counter++;
            }
          },
          computed: {
            reversedMessage() {
              return this.message.split('').reverse().join('');
            }
          }
        });
      </script>
    </body>
    </html>

위 예제에서 incrementCounter 메서드는 counter를 증가시키는 역할을 합니다. reversedMessage 계산된 속성은 message를 뒤집은 문자열을 반환합니다.


Step 6 Props를 통해 데이터 전달하기

props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. 이를 통해 컴포넌트 간의 데이터 흐름을 관리할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js Todo List Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <ol>
      <!-- todo-item 컴포넌트를 반복적으로 사용 -->
      <todo-item
        v-for="item in groceryList"
        v-bind:key="item.id"
        v-bind:title="item.title">
      </todo-item>
    </ol>
  </div>

  <script>
    // todo-item 컴포넌트 정의
    Vue.component('todo-item', {
      template: '<li>{{ title }}</li>',
      props: ['title']
    });

    // Vue 인스턴스 생성
    var app = new Vue({
      el: '#app',
      data: {
        groceryList: [
          { id: 0, title: 'Vegetables' },
          { id: 1, title: 'Cheese' },
          { id: 2, title: 'Whatever else humans are supposed to eat' }
        ]
      }
    });
  </script>
</body>
</html>

위 예제에서 todo-item 컴포넌트는 title이라는 prop을 정의합니다. 부모 컴포넌트는 groceryList 데이터를 자식 컴포넌트에 전달하여 v-for를 통해 groceryList를 todo-item 컴포넌트 안에 전부 렌더링하여 화면에 노출시킵니다.


Step 7 Vue 인스턴스 활용 팁

  1. 데이터 반응성 활용 데이터가 변경될 때 자동으로 DOM이 업데이트되도록 Vue의 반응성을 활용합니다. 이는 코드의 간결성을 높이고 유지보수를 쉽게 합니다.

  2. 컴포넌트 재사용 컴포넌트를 사용하여 코드의 재사용성과 유지보수성을 높입니다. 컴포넌트는 독립적인 기능 단위로 설계하여 모듈화할 수 있습니다.

  3. 라이프사이클 훅 활용 라이프사이클 훅을 사용하여 인스턴스의 특정 시점에 실행할 로직을 정의합니다. 이는 초기화 작업, 리소스 정리, 외부 데이터 로드 등에 유용합니다.

  4. Vue Devtools 사용 Vue Devtools를 사용하여 애플리케이션의 상태를 쉽게 디버깅하고 모니터링합니다. 이는 개발 중 오류를 빠르게 찾아내고 수정하는 데 도움이 됩니다.

  5. 성능 최적화 v-if와 v-for 같은 디렉티브를 적절히 사용하여 애플리케이션의 성능을 최적화합니다. 필요하지 않은 DOM 업데이트를 피하고, 효율적인 렌더링을 보장합니다.



조회수 103회
bottom of page