해당 포스트는 Doit! vue.js 입문 책을 참고하여 정리한 내용입니다. 2.5버전의 내용으로 현재 Vue 3.x대 버전의 내용과는 차이가 있을 수 있습니다.
http://www.yes24.com/Product/Goods/58206961
Vue.js란?
- 웹페이지 화면을 개발하기 위한 프런트엔드 프레임워크
UI 화면단 라이브러리
- UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰모델에 해당하는 화면단 라이브러리
MVVM 패턴
- 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있다.
- 뷰(View)
- 사용자에게 보이는 화면
- 돔(DOM)
- HTML 문서에 들어가는 요소의 정보를 담고 있는 데이터 트리
- 돔 리스너(DOM Listener)
- 돔의 변경내역에 대해 즉각적으로 반응하여 특정로직을 수행하는 장치
- 모델(Model)
- 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체로 저장
- 데이터 바인딩
- 뷰에 표시되는 내용과 모델의 데이터를 동기화
- 뷰 모델
- 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
컴포넌트 기반 프레임워크
- 화면을 컴포넌트로 구조화한 컴포넌트간 관계도
- 코드를 재사용하기 쉽다.
- 리액트의 단방향 데이터 흐름과 앵귤러의 양방향 데이터 바인딩의 장점을 모두 가지고있다.
양방향 데이터 바인딩
- 화면에 표시되는 값과 프레임워크의 모델 데이터값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는것
단방향 데이터 흐름
- 컴포넌트 단방향 통신
- 컴포넌트 간에 데이터를 전달할때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게 끔 프레임워크가 구조화 되어있다.
가상돔
- 빠른 화면 렌더링을 위해 리액트의 가상돔 렌더링 방식을 적용하여 사용자 인터렉션에 적합
- 가상돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.
- 브라우저에 성능부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴수 있다.
뷰 인스턴스
- 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위
new Vue({
el: '#app'
data: {
message: 'Hello'
}
});- el 속성
- 뷰로 화면이 그려지는 시작점을 의미
- data 속성
- 위에서 message라는 새로운 속성을 추가하고 Hello라는 값을 주었다.
- template
- 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성,
- methods
- 화면 로직 제어와 관계된 메서드를 정의하는 속성
- 화면의 이벤트와 화면동작과 관련된 로직을 추가할 수있다.
- created
- 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
뷰 인스턴스의 유효 범위
- 뷰 인스턴스를 생성하면 HTML 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.
- 인스턴스가 화면에 적용되는 과정
- 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성
- 특정 화면 요소에 인스턴스를 붙임
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
뷰 인스턴스 라이프 사이클
- 인스턴스의 상태에 따라 호출할 수 있는 속성
- 모바일 앱을 비롯하여 일반적으로 에플리케이션이 가지는 생명주기
- 라이프 사이클훅
- 각라이프 사이클 속성에서 실행되는 커스텀 로직
라이프 사이클 속성
인스턴스 생성
- 이벤트 및 라이프 사이클 초기화
beforeCreate
- beforeCreate 이후 화면에 반응성 주입
created
- el, template 속성 확인
- data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행 할 수 있다.
- 서버에 데이터 요청하여 받아오는 로직 수행하기 좋다.
beforeMount
- template 속성 내용을 render()로 변환한 후 el 속성에 지정한 화면요소에 인스턴스를 부착하기 전에 호출되는 단계
mounted
- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출 되는 단계
- template 속성에 정의한 화면요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
인스턴스를 화면에 부착
- 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다.
- 치환된 값은 뷰의 반응성을 제공하기위해 $watch 속성으로 감시 - 데이터 관찰
beforeUpdate
- 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
- 변경 에정 데이터 값과 관련된 로직을 미리 넣을 수 있다.
updated
- 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
인스턴스 내용 갱신
beforeDestroy
- 뷰인스턴스가 파괴되기 직전에 호출되는 단계
destroyed
- 뷰 인스턴스가 파괴되고 나서 호출되는 단계
인스턴스 소멸
뷰 컴포넌트
컴포넌트란?
- 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능
- 재활용이 가능하다
컴포넌트 등록
지역 컴포넌트
- 특정 인스턴스에서만 유효한 범위를 가진다.
new Vue({
components: {
'컴포넌트 이름': 컴포넌트 내용
'my-local': template: '<div> 지역컴포넌트 </div>'
}
});전역 컴포넌트
- 여러 인스턴스에서 공통으로 사용가능
- 컴포넌트 이름은 template 속성에서 사용할 HTML사용자 정의 태그 이름을 의미
- 컴포넌트 내용
- 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성
- template, data, methods 등
Vue.component('컴포넌트 이름', {
//컴포넌트 내용
template: '<div> 전역컴포넌트 </div>'
});뷰 컴포넌트 통신
컴포넌트 통신간 유효범위
- 각 컴포넌트의 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.
상 하위 컴포넌트 관계
- 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 하위 컴포넌트가 된다.
- 하위컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다.
상위 → 하위 (props 속성)
- 하위 컴포넌트의 props 속성 정의 방식
Vue.component('child-component',{
props: ['props 속성 이름'],
});- 상위 컴포넌트의 HTML에 등록된
child-component태그에v-bind속성추가 - props 오른쪽에 하위컴포넌트에 전달할 상위 data 속성을 지정
<child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>
하위 → 상위(이벤트 전달)
- 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내야 한다.
- 하위 컴포넌트에서 특정이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출
- $emit()을 호출하면 괄호 안에 정의된 이벤트가 발생
//이벤트 발생
this.$emit('이벤트명');
//이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>같은 레벨의 컴포넌트간 통신
- 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야한다.
관계없는 컴포넌트 간 통신 - 이벤트 버스
- 개발자가 지정한 2개의 컴포넌트간에 데이터를 주고 받을 수 있는 방법
- 상위 -하위 관계를 유지하고 있지 않아도 컴포넌트 에서 다른 컴포넌트로 바로 데이터 전달가능
- 이벤트 버스 형식
//이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 methods: { 메서드명: function() { eventBus.$emit('이벤트명',데이터); } } //이벤트를 받는 컴포넌트 methods: { created: function() { eventBus.$on('이벤트명', function(데이터) { ... }); } }
백엔드 개발자