[Vue] Vue.js 아케텍처와 Vue 인스턴스, 컴포넌트는?

 

Vue.js 

- 

vue는 angular1의 문법과 쓰임이 매우 유사하다. prefix만 조금 다를뿐 (v-와 ng-) 아무 이질감 없이 받아들일 수 있다

- vue는 기본적으로 component를 기본으로 한다.

- 공식 문서가 한글 번역되어 있어 쉽게 시작할 수 있다. (한글 공식 문서 : https://kr.vuejs.org/v2/guide/index.html)

 

Vue.js 의 아키텍쳐
- MVVM 모델의 VM을 Vue.js가 담당
- 웹페이지는 Dom과 자바스크립트의 연합으로 만들어지게 되는데 Dom이 View 역할을 하고, 자바스크립트가 Model 역할을 한다
- 뷰모델이 없는 아키텍처에서는 getElementById 같은 Dom API를 직접 이용해서 모델과 뷰를 연결 (단점 : 코드양이 증가)
- 하지만 모델과 뷰를 연결하는 뷰모델 역할을 대신 수행해주는 것이 MVVM 모델이고 Vue.js 가 하는 역할임

Vue 인스턴스
- Vue 인스턴스 : Vue 생성자 함수로 뷰모델(View Model, VM) 을 만드는데 이것이 Vue 인스턴스다.
- 이것은 자바스크립트 객체인데 내부적으로 연결될 템플릿이 필요하다. 그것을 el키에 셀렉터 값(id 면#, class 면.)으로 넣어주면 된다.

다음은 Hello world 코드를 보자.

<div id="app">{{ msg }}</div>  <script> var vm = new Vue({ //vue 생성자   el: '#app', //구현시킬 공간 (Element)   data: {     msg: 'Hello world',     //dummy: '이처럼 쉼표로 구분하여 데이터를 추가할 수 있다'   } }); </script>

-data객체는 인스턴스의 상태를 저장하는 역할을 하는데 템플릿에 바인딩할 데이터들의 집합이다.
- msg 변수 값을 템플릿에 인터폴레이션 문법으로 바인딩하여 출력하였다.

- Vue 인스턴스에는 methods 객체도 있는데 이것은 인스턴스의 행동 즉 method의 집합이다.

<div id="app">   <button v-on:click="onClick">클릭미!</button> </div>  <script> var vm = new Vue({   el: '#app',   methods: {     onClick: function(){ alert('Hello world'); }   } }); </script>

- 또한, methods와 비슷한 역할을 하지만 캐쉬를 가지고 있어서 함수 본문에서 사용하는 상태값에 변화가 없으면 함수를 수행하지 않고 저장한 캐쉬값을 바로 반환하는computed객체가 있다.

<div id="app">{{ greeting }}</div>  <script> var vm = new Vue({   el: '#app',   data: { name: 'Chris' },   computed: {     greeting: function(){ return 'Hello ' + this.name; }   } }); </script>

인스턴스 사이클
- 크게 인스턴스 생성new Vue()

-> 마운트mounted

-> 소멸destroyed로 진행
- 인스턴스 이벤트 시점마다 이벤트 훅을 사용하여 이벤트 실행 가능

Vue 컴포넌트
- 컴포넌트 : 재사용 가능한 컴포넌트 제작 기술의 집합을 말하는 것
- Vue 컴포넌트 제작 방법 : Vue.component
- Vue 인스턴스는 모든 컴포넌트의 상위 컴포넌트로서 자식 컴포넌트를 여러개 가질 수 있는데 이 component 함수로 만들어 자식으로 사용한다
- 또한, 트리형태로 구성했기 때문에 상위에 있는 것을 부모(Parent) 컴포넌트, 아래 있는것(중첩되어 있는)을 자녀(Child) 컴포넌트라고 부른다.

<div id="child">Hello {{ name }}</div>  <div id="app"><Child></Child></div>  <script> Vue.component('Child', { //Child 컴포넌트 정의   el: '#child',   data: function() { //Vue 인스턴스와 다른점     return {       name: 'Chris'     }   } });  var vm = new Vue({ //상위 컴포넌트가 된다.   el: '#app' }); </script>

- Child 컴포넌트를 정의했는데 Vue 인스턴스를 만들 때와 다른점은 data 부분이다. 컴포넌트는 재사용이 가능하기 때문에 고유한 데이터를 가지고 있어야 한다. 그래서 매번 함수를 실행한 결과 새로운 객체를 반환하도록 했다. (Vue 인스턴스에서는 객체를 할당했다)

- 데이터는 부모 -> 자녀 방향으로만 전달 가능 (단방향 데이터 흐름)
- 자녀 컴포넌트는 프로퍼티를 이용해 데이터 전달

<Child name="Chris"></Child>  <script> Vue.component('Child', { //Child 컴포넌트 정의   el: '#child',   //부모 컴포넌트 측에서는 Child의 name 속성에    props: ['name'] //Chris 문자열을 데이터로 전달 (필요한 만큼 배열에 추가하는 방식) }); </script>

- 반면, 자녀 -> 부모 방향으로는 데이터 전달이 불가능한데 이벤트로 전달해 커뮤니케이션하는 방법이 있다.
- 자식이 이벤트를 발생(emit)하면 부모에서는 이 이벤트를 수신할수 있는 핸들러 함수와 연결

<Child v-on:typed="onTyped"></Child> <!-- 2.Child 컴포넌트는 onClick 메서드에서 ‘typed’ 이벤트를 발생 -->  <script> Vue.component('NameForm', {   el: '#child',   methods: {     onClick: function() {       this.$emit('typed'); //1. Child 컴포넌트는 onClick 메서드에서 ‘typed’ 이벤트를 발생     }   } }); </script>

참고 : http://blog.jeonghwan.net/vue/2017/03/27/vue.html