vue - reactivity, instance, 전역 컴포넌트와 지역 컴포넌트

뷰의 핵심 - 반응성

- 데이터의 변화를 라이브러리에서 감지해서 알아서 화면으로 자동으로 그려주는 것

- 데이터 바인딩

 

인스턴스 생성

new Vue();

 

인스턴스를 생성하면 그건 루트 컴포넌트가 됩니다.

 

컴포넌트 등록 

1. 전역 컴포넌트

1) 전역 컴포넌트로 등록 :

Vue.component('컴포넌트 이름', 컴포넌트 내용);

Vue.component('app-header', {
	template: '<h1>Header</h1>'
});

2) app-header라는 태그를 만들어줘야 한다. (인스턴스 영역 안에다가)

app-header의 컴포넌트의 app-header 태그가 되고 이 부분에서 컴포넌트 내용이 반영이 되서 화면에 나타난다.

 

2. 지역 컴포넌트

    
    <div id="app">
        <app-header></app-header>
        <app-content></app-content>
        <app-footer></app-footer>
    </div>
    
    
    new Vue({
            el: '#app',
            // 지역 컴포넌트 등록 방식
            components: {
                // '컴포넌트 이름' : 컴포넌트 내용
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            }
    });

 

컴포넌트는 각각의 고유의 유효범위를 갖는다. 

 

3. 전역 컴포넌트와 지역 컴포넌트의 차이점

전역 : 플러그인이나 라이브러리 형태로 전역으로 사용해야 하는 것들

지역 : 싱글 파일 컴포넌트 밑에 어떤 컴포넌트가 등록되어 있는지 알 수 있다.

 

실제로 서비스를 개발 할 때는 인스턴스 하나에 컴포넌트 여러개를 붙이는 형식으로 진행하기 때문에

아래는 차이점으로만 알아 두시면 된다. 

 

인스턴스를 생성할때마다 컴포넌트를 등록하는 게 지역컴포넌트

전역 컴포넌트는 인스턴스를 생성 할 때마다 컴포넌트를 등록할 필요가 없다.