인스턴스? 란 무엇인가? vue.js 가장 기초
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다.
모든 vue 앱은 vue 함수로 새 vue 인스턴스를 만드는 것부터가 시작입니다.
var vm = new Vue({
//옵션
})변수 vm을 인스턴스로 선언한것이죠.
이제 이렇게 선언한 후 개발자 도구를 열어 콘솔로그에 vm을 찍어보면 vue 인스턴스에 api 목록이 나옵니다.
엄격하게 MVVM패턴과 관련이 없지만 Vue의 디자인은 부분적으로 MVVM패턴에 영감을 받았습니다.
관례적으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm (viewModel의 약자)을 사용합니다.
MVVM이란?
MVVM 패턴은 이름에서 알 수 있듯이 3가지 구성요소로 구성되어 있습니다.
- 모델 (Model)
- 뷰 (View)
- 뷰 모델 (View Model)
MVVM을 이해하기 위해서는 이들의 관계를 알아야 합니다.
뷰는 뷰 모델을 알지만, 뷰 모델은 뷰를 알지 못합니다. 뷰 모델은 모델을 알지만, 모델은 뷰 모델을 알지 못합니다.
이러한 구조를 통해서 뷰 모델과 모델이 뷰로부터 독립적인 형태를 만들어서 위에서 말한 UI로 부터 비즈니스 로직과 프레젠테이션 로직을 분리라는 목적을 이룰 수 있게 되었죠.
Vue 인스턴스를 생성할 때는 options 객체를 전달해야 합니다.
이 가이드는 대부분 원하는 생성을 구현할 때 이런 옵션들을 사용하여 원하는 동작을 구현하는 방법에 대해 다룹니다.
전체 옵션 목록은 API reference에서 확인할 수 있습니다.
Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고
재사용 가능한 컴포넌트 트리로 구성됩니다.
예를 들어서 Todolist 앱의 컴포넌트 트리는 아래와 같이 표현됩니다.
다음 글에 컴포넌트 시스템에 대해 자세하게 설명할 예정입니다.
지금은 모든 vue 컴포넌트가 본질적으로 확장된 vue 인스턴스이기에 모두 같은 옵션 객체 (몇 가지 루트 인스턴스 전용 옵션 제외)를 전달해야 하는 것만 알면 됩니다.
