Vue.js는 MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리이다.
- 데이터 바인딩과 화면단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데 궁극적인 목적이 있다.
- 양방향 데이터 바인딩을 제공한다.
- 컴포넌트 간 통신은 기본적으로 단방향 데이터(부모-> 자식)을 사용한다.
MVVM 패턴이란?
: 백엔드 로직과 클라이언트의 마크업 & 데이터 표현을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인하였다. 화면 앞단의 화면동작 관련 로직과 백엔드의 DB데이터 처리 및 서버 로직을 분리하고 , 넘어온 데이터를 Model에 담아 View(Dom)으로 넘겨주는 중간 지점이라고 보면 된다.
반응성 (Reactivity)
Vue의 가장 큰 특징이라고 할 수 있는데, 데이터 변화를 감지하고 자동으로 화면을 갱신하는 특성을 말한다.
변경 내용을 추적하는 방법은 vue 인스턴스에 자바스크립트 data 옵셥으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setter(Java의 class 생성자)로 변환한다.
getter와 setter는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있다. (사용자가 접근할 수 있는 속성이 아니라, 뷰 인스턴스에 정의해놓은 data 속성변화 감지를 위한 내부적 속성이다.)
watcher는 모든 컴포넌트에 존재하는 속성으로 화면을 다시 그리는데 중요한 역할을 한다.
인스턴스가 화면에 올라가고 나서 특정 data 속성을 바꾸거나 접근하면 watcher 에서 해당 사실을 감시하고 신호를 보낸다.
💡 뷰의 반응성은 인스턴스를 생성하는 시점에서 생긴다. 즉,인스턴스를 정의할 떄 data 속성에 정의하지 않고 인스턴스를 생성하고 data 속성에 객체를 추가하면 반응성은 생기지 않는다.
인스턴스?
인스턴스는 Vue.js로 화면을 개발하기 위해 꼬고 생성해야 하는 필수 단위이다.
Vue 인스턴스 생성자
new Vue({
// instance option properties
template: "",
el: "",
methods: {}
// ...
});뷰 객체를 생성 할 때 위와 같이 data, template, el, methods, life cycle hook 등 인스턴스 옵션 속성을 포함할 수 있다.
Vue의 Life cycle
자주 사용되는 hooks만 기술하였다.
-
created
: data속성과 metods속성에 정의된 값에 접근하여 로직을 실행 할 수 있지만, 인스턴스가 화면요소에 부착되기 전이기 때문에 template속성에 정의된 돔 요소로 접근할 수 없음 -
mounted
: el속성에 지정한 화면 요소에 인스턴스가 부착되면 호출되는 단계
생성자 함수
함수를 이용해서 어떤 정보를 담은 객체를 생성
매번 생성해서 사용하는 것이 아닌 미리 정의한 함수를 가져다가 사용할 수 있음
vue에서는 생성함수로 API & 속성들을 정의한다.
컴포넌트
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.
인스턴스를 생성하면 개발자 도구에서 Root 컴포넌트로 인식
Root는 부모컴포넌트, 그 아래 app-header/app-content 는 자식 컴포넌트이다.
전역 컴포넌트 등록 방법 (실무에서는 거의 쓰일 일이 없다.)
Vue.component('컴포넌트 이름', {컴포넌트 내용})Vue.component('app-header', { template: '<h1>Header</h1>' }) Vue.component('app-content', { template: '<div>Content</div>' }) new Vue({ el: '#app' })
template 속성을 사용해서 태그를 입력할 수 있다.
- 지역 컴포넌트 등록 (서비스를 만들 때 가장 많이 쓰임)
// new Vue({
// el: '#app',
// components: {
// 'key': 'value'
// '컴포넌트 이름': 컴포넌트 내용
// }
// })
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
'app-footer': {
template: '<footer>footer</footer>'
}
}
})전역 컴포넌트와 지역 컴포넌트의 차이
: 지역 컴포넌트는 하단에 어떤게 등록되는지 알 수 있다. 컴포넌트 기반 형식으로 개발하면, 특정 컴포넌트 아래 어떤 컴포넌트가 등록되어 있는지, 컴포넌트 속성으로 알 수 있다. 전역 컴포넌트는 대부분 플러그인이나 라이브러리로 형태로 전역으로 사용해야 되는 컴포넌트만 Vue.component를 사용한다.
컴포넌트와 인스턴스와의 관계
전역 컴포넌트는 인스턴스를 생성할 때마다 따로 등록할 필요없이 이미 등록이 되어있다.
하지만 지역 컴포넌트는 인스턴스마다 새로 생성해줘야 되기 때문에 인스턴스를 새로 만들 때마다 번거로움이 있다.
참고 사이트
[MVVM 패턴 - https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80][Vue2 반응성에 대해 - https://pozafly.github.io/vue/Vue2-%EB%B0%98%EC%9D%91%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C/]
[인스턴스? - https://velog.io/@ahn-sujin/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8]
