[Vue.js][FrontEnd] Vue.js 필수 기술 - 인스턴스

Vue 인스턴스

Vue 인스턴스는 Vue.js를 사용하여 생성하는 애플리케이션의 기본 단위입니다. 각 Vue 애플리케이션은 `new Vue()`로 생성되는 인스턴스를 통해 시작됩니다. 이 인스턴스를 통해 데이터, 메소드, 라이프 사이클 훅 등과 같은 다양한 옵션을 포함할 수 있습니다.

Vue 인스턴스를 생성할 때, 여러분은 옵션 객체를 전달할 수 있습니다. 이 객체는 다양한 프로퍼티와 메소드를 포함할 수 있는데, 이들은 인스턴스의 데이터(`data`), 계산된 속성(`computed`), 메소드(`methods`), 감시자(`watch`), 그리고 라이프 사이클 훅(`created`, `mounted`, `updated`, `destroyed` 등)을 정의하는 데 사용됩니다.

예를 들어:

var vm = new Vue({
  // 옵션 객체
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet: function () {
      alert(this.message);
    }
  }
});

여기서 `vm`은 Vue 인스턴스를 참조하는 변수입니다. 인스턴스가 생성되면, `.message` 프로퍼티에 접근하거나 `.greet()` 메소드를 호출할 수 있습니다.

Vue 인스턴스는 또한 데이터 바인딩과 반응성을 활성화하기 위해 DOM 요소에 "마운트" 될 수 있습니다. 이를 위해 `el` 옵션을 사용하여 인스턴스가 활성화될 DOM을 지정합니다.

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

이 코드는 ID가 `app`인 DOM 요소에 Vue 인스턴스를 마운트하고, 그 요소 안의 데이터를 Vue 인스턴스의 데이터와 동기화합니다.

Vue 인스턴스가 마운트되면, Vue는 DOM을 인스턴스의 데이터와 연결된 템플릿으로 변환합니다. 이 과정에서 데이터가 변경될 때마다 Vue는 DOM을 자동으로 업데이트하여 변경 사항을 반영합니다. 이 반응성 시스템은 Vue의 핵심 기능 중 하나이며, 애플리케이션의 상태와 사용자 인터페이스 사이의 일관성을 유지하는 데 도움을 줍니다.

각 Vue 인스턴스는 생성될 때마다 라이프 사이클을 거치게 되는데, 여러분은 이 라이프 사이클 훅을 사용하여 인스턴스가 DOM에 마운트되기 전후나 데이터가 업데이트되기 전후에 특정 코드를 실행할 수 있습니다. 이를 통해 여러분은 애플리케이션의 상태를 세밀하게 제어할 수 있습니다.

 

뷰 인스턴스 옵션 속성

Vue 인스턴스를 생성할 때 여러 옵션 속성을 정의할 수 있으며, 각 속성은 Vue 애플리케이션의 다양한 측면을 관리합니다. 주요 옵션 속성은 다음과 같습니다:

1. `data`: 애플리케이션의 반응형 데이터를 포함합니다. 여기에 있는 속성들은 Vue 인스턴스에 의해 관찰되며, 데이터가 변경될 때 뷰가 자동으로 반응하여 DOM을 업데이트합니다.

2. `methods`: 인스턴스에 메소드를 정의하는 데 사용됩니다. 이 메소드들은 DOM 이벤트 핸들러나 데이터 바인딩 내에서 호출될 수 있습니다.

3. `computed`: 계산된 속성을 정의합니다. 계산된 속성은 데이터가 변경될 때만 다시 계산되며, 종속된 데이터가 변경되지 않았다면 캐시된 값을 반환합니다.

4. `watch`: 데이터의 변화를 감시하고 이에 반응할 수 있는 함수를 정의합니다. 데이터가 변경될 때마다 지정된 함수가 호출됩니다.

5. `props`: 부모 컴포넌트로부터 받는 데이터를 정의합니다. 자식 컴포넌트는 이 props를 통해 부모 컴포넌트의 데이터를 받을 수 있습니다.

6. `propsData`: 컴포넌트를 프로그래매틱 방식으로 생성할 때 props에 전달할 초기값을 설정합니다.

7. `el`: Vue 인스턴스가 마운트될 DOM 요소를 지정합니다. 문자열 또는 DOM 객체를 사용할 수 있습니다.

8. `template`: Vue 인스턴스에 사용할 HTML 템플릿을 정의합니다. `el` 속성으로 지정된 DOM 요소의 내용을 대체합니다.

9. `render`: DOM 요소의 내용을 생성하는 데 사용되는 렌더링 함수입니다. 템플릿 대신 함수를 사용하여 더 세밀한 제어를 할 수 있습니다.

10. `components`: 로컬 컴포넌트를 등록할 때 사용됩니다. 이 옵션을 통해 현재 인스턴스에서만 사용할 컴포넌트를 정의할 수 있습니다.

11. `mixins`: 여러 컴포넌트 간에 공통 기능을 재사용하기 위한 믹스인을 정의합니다.

12. `directives`: Vue 인스턴스에서 사용할 사용자 정의 지시자를 등록합니다.

13. `filters`: 로컬 필터를 정의하며, 텍스트 형식화 작업에 사용됩니다.

14. `provides`: 이 옵션을 사용하여 하위 컴포넌트에 주입할 수 있는 값을 정의합니다.

15. `inject`: 상위 컴포넌트나 조상 컴포넌트에서 제공된 값을 주입받기 위해 사용됩니다.

16. `lifecycle hooks`: Vue 인스턴스의 생명주기 동안 실행되는 여러 훅을 정의합니다. 예를 들어 `created`, `mounted`, `updated`, `destroyed` 등이 있습니다.

뷰 인스턴스의 유효 범위

 

Vue 인스턴스의 유효 범위(scope)는 주로 인스턴스가 관리하는 DOM과 데이터 사이의 상호 작용을 의미합니다. 각 Vue 인스턴스는 자체적인 반응형 시스템을 가지며, 인스턴스 내에서 선언된 데이터, 메소드, 계산된 속성 등은 해당 인스턴스의 유효 범위 내에서만 접근 가능합니다.

인스턴스 유효 범위의 주요 특징은 다음과 같습니다:

1. 데이터 바인딩: 인스턴스의 `data` 객체 내부의 속성들은 해당 인스턴스의 템플릿에서 직접 사용할 수 있습니다. 이 속성들은 Vue의 반응형 시스템에 의해 자동으로 갱신되며, 인스턴스 내부에서만 접근 가능합니다.

2. 메소드 접근: 인스턴스의 `methods` 객체에 정의된 함수들 역시 해당 인스턴스의 템플릿 내에서 사용될 수 있으며, 이 함수들은 인스턴스 데이터에 접근할 수 있습니다.

3. 컴포넌트 내부: 각 Vue 컴포넌트는 별도의 인스턴스로 취급되므로, 각 컴포넌트의 유효 범위는 독립적입니다. 부모와 자식 컴포넌트 간의 데이터 흐름은 props와 이벤트를 통해 관리됩니다.

4. 계산된 속성과 감시자: `computed`와 `watch`에 정의된 속성과 감시자들은 해당 인스턴스의 데이터에 의존적입니다. 이들은 인스턴스의 데이터에 기반한 복잡한 연산이나 비동기 연산을 수행할 때 유용하게 사용됩니다.

5. 라이프 사이클 훅: 인스턴스의 생성부터 소멸까지 여러 단계를 거치며, 각 단계에서 호출되는 라이프 사이클 훅은 해당 인스턴스의 상태에 대한 접근을 제공합니다.

 

6. 인스턴스 속성과 메소드: Vue 인스턴스에는 `$` 접두사를 가진 여러 내장 속성과 메소드가 있습니다. 예를 들어, `$el`은 인스턴스가 마운트된 DOM 요소를 참조하고, `$data`는 인스턴스의 데이터 객체를 참조합니다. 이러한 속성과 메소드는 전역적으로 접근할 수 있는 것이 아니라, 해당 Vue 인스턴스 내에서만 유효합니다.

7. 이벤트 버스: Vue 인스턴스는 이벤트 버스로도 사용될 수 있습니다. 이는 컴포넌트 간에 데이터를 전달하는데 사용되며, 이벤트 버스로 사용되는 인스턴스는 해당 이벤트를 관리하는 범위 내에서만 이벤트를 방송하고 수신합니다.

인스턴스의 유효 범위는 코드의 구조화와 유지 관리를 용이하게 하고, 다른 인스턴스 또는 컴포넌트와의 충돌을 방지합니다. 각 인스턴스는 독립적인 범위를 가지므로, 하나의 인스턴스 내에서 발생하는 데이터 변경이 다른 인스턴스에 영향을 주지 않습니다.

 

뷰 인스턴스 라이프 사이클

Vue 인스턴스의 라이프사이클(Lifecycle)은 인스턴스의 생성부터 파괴까지 일련의 단계를 말합니다. 이 라이프사이클은 여러 "훅"을 통해 사용자가 특정 시점에 코드를 실행할 수 있게 합니다. Vue 인스턴스의 라이프사이클은 크게 다음과 같은 단계로 나눌 수 있습니다:

1. 생성(Creation): 인스턴스가 생성되는 단계로, 데이터 관찰 및 이벤트/감시자 설정이 이루어집니다. 이 단계에는 `beforeCreate`와 `created` 훅이 있습니다.
   - `beforeCreate`: 데이터와 이벤트가 설정되기 전에 호출됩니다.
   - `created`: 인스턴스가 생성된 후, 데이터와 이벤트가 활성화된 상태에서 호출됩니다.

2. 마운팅(Mounting): 인스턴스가 DOM에 부착되는 단계입니다. 여기에는 `beforeMount`와 `mounted` 훅이 있습니다.
   - `beforeMount`: 인스턴스가 DOM에 부착되기 전에 호출됩니다.
   - `mounted`: 인스턴스가 DOM에 부착된 후 호출되며, 템플릿과 렌더링된 DOM에 접근할 수 있습니다.

3. 업데이트(Updating): 인스턴스의 데이터가 변경되어 DOM을 업데이트해야 할 때 발생하는 단계입니다. 여기에는 `beforeUpdate`와 `updated` 훅이 있습니다.
   - `beforeUpdate`: 데이터가 변경되어 DOM이 업데이트되기 전에 호출됩니다.
   - `updated`: 데이터 변경에 의한 DOM의 업데이트가 완료된 후 호출됩니다.

4. 파괴(Destruction): 인스턴스가 파괴되는 단계로, 이벤트 리스너나 반응형 구독이 제거됩니다. 여기에는 `beforeDestroy`와 `destroyed` 훅이 있습니다.
   - `beforeDestroy`: 인스턴스가 파괴되기 직전에 호출됩니다.
   - `destroyed`: 인스턴스가 파괴된 후 호출되며, 모든 디렉티브 바인딩이 해제되고 이벤트 리스너가 제거됩니다.

각 훅은 특정 시점에 필요한 코드를 실행하는 데 사용할 수 있으며, 예를 들어, 네트워크 요청을 초기화하거나, 타이머를 설정하고 해제하는 등의 작업을 수행할 수 있습니다. 이러한 라이프사이클 훅을 사용함으로써, 개발자는 Vue 인스턴스의 생성과 파괴 과정에서 세밀한 제어를 할 수 있게 됩니다.

 

Vue.js 공식 홈페이지

Vue.js 공식 문서에서는 이 라이프사이클 훅들에 대해 더 자세히 설명하고 있으며, 각 훅의 사용 예제를 제공하고 있습니다. 더 많은 정보를 원한다면 [Vue.js 공식 문서](https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks)를 참조하시기 바랍니다.