본문 바로가기
vue.js

뷰 컴포넌트

Grindman 2020. 6. 28. 19:17

컴포넌트란?

 

컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.

 

 

컴포넌트 등록하기

 

컴포넌트를 등록하는 방법은 전여고가 지역의 두 가지가 있다. 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 더 쉽게 말하자면 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있다는 것이다.

 

 

전역 컴포넌트 등록

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 된다. 다음은 그 형식이다.

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

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있다. 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(custom tag) 이름을 의미한다. 태그 이름의 명명 규칙은 HTML 사용자 저으이 태그 스펙에서 강제하는 '모두 소문자'와 '케밥 기법'을 따르지 않아도 된다.

그리고 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성한다. 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.

 

그러면 Vue.component()로 전역 컴포넌트를 1개 등록하고 화면에 그리는 예제를 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component> <!-- 전역 컴포넌트 표시 -->
</div>

<script>

// 전역 컴포넌트 등록
Vue.component('my-component', {
    template: '<div>전역 컴포넌트가 등록되었어!</div>'
})

new Vue({
    el: "#app"
});

</script>


</body>
</html>

이 코드가 실행되어 화면에 나타나기까지의 과정을 살펴보자.

 

뷰 라이브러리 파일 로딩 -> 뷰 생성자로 컴포넌트 등록 Vue.component() -> 인스턴스 객체 생성(옵션 속성포함) -> 특정 화면요소에 인스턴스 부착 -> 인스턴스 내용변환(등록된 컴포넌트 내용도 변환) -> 변환된 화면 요소를 사용자가 최종확인

 

인스턴스가 생성되고, 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환된다. 따라서 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 볼 수 있는 형태의 화면 요소로 최종 변환되겠다.

 

전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {} 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용(컴포넌트 내용)을 작성해야 한다. 이 예제에서는 컴포넌트의 이름을 my-component로 지정했고, 컴포넌트 내용으로는 template 속성을 정의하고 '전역 컴포넌트가 등록되었어!'라는 <div> 태그를 작성했다.

 

따라서 이 컴포넌트를 아래와 같이 HTML에 추가하면 최종적으로 컴포넌트가 등록된다.

<my-component></my-component>

그리고 등록된 my-component 컴포넌트는 실제로 화면에 아래와 같이 그려진다.

<div>전역 컴포넌트가 등록되었어!</div>

결론적으로 인스턴스가 생성된 후 화면에 그려질 때 실제 HTML 코드 모양은 다음과 같다.

<div id="app">
    <button>컴포넌트 등록</button>
    <!-- 등록한 my-component가 최종적으로 변환된 모습 -->
    <div>전역 컴포넌트가 등록되었어!</div>
</div>

 

 

지역 컴포넌트 등록

지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다. 다음은 지역 컴포넌트 등록 형식이다.

new Vue({
	components: {
    	'컴포넌트 이름': 컴포넌트 내용
    }
});

 

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변활될 때의 내용을 의미한다.

 

지역 컴포넌트 예제를 살펴보자.

<script>

var cmp = {
    // 컴포넌트 내용
    template: '<div>지역 컴포넌트가 등록되었어!</div>'
};

new Vue({
    el: "#app",
    components: {
        'my-local-component': cmp
    }
});

</script>

변수 cmp에는 화면에 나타낼 컴포넌트의 내용을 정의했다. 컴포넌트의 내용에 template, data, methods 등 여러 가지 속성이 들어갈 수 있지만 여기서는 간단히 컴포넌트를 등록하는 코드만 보여주기 위해 template 속성만 사용했다. 그리고 template 속성에 <div> 태그 1개만 설정한다. 아래 뷰 인스턴스에 components 속성을 추가하고 컴포넌트 이름에는 my-local-component를, 컴포넌트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정한다.

 

그리고 HTML에 <my-local-component> 태그를 추가하여 컴포넌트를 화면에 나타낸다.

<div id="app">
    <button>컴포넌트 등록</button>
    <my-local-component></my-local-component>
</div>

 

 

지역 컴포넌트와 전역 컴포넌트의 차이

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div id="app">
    <h3>첫 번째 인스턴스 영역</h3>
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>

<hr>

<div id="app2">
    <h3>두 번째 인스턴스 영역</h3>
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>

<script>

// 전역 컴포넌트 등록
Vue.component('my-global-component', {
    template: '<div>전역 컴포넌트임</div>'
});

// 지역 컴포넌트 내용
var cmp = {
    template: '<div>지역 컴포넌트임</div>'
};

new Vue({
    el: "#app",
    // 지역 컴포넌트 등록
    components: {
        'my-local-component': cmp
    }
});

// 두 번재 인스턴스
new Vue({
    el: "#app2"
});

</script>

</body>
</html>

첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타났다. 하지만 구분선 밑에 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타나고, 지역 컴포넌트는 나타나지 않았다. 왜 그럴까? 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문이다.

전역 컴포넌트 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야한다.

 

긜고 인스턴스의 범위도 여기에 적용된다.

'vue.js' 카테고리의 다른 글

뷰 인스턴스  (0) 2020.06.28
Vue.js의 특징  (0) 2020.06.27

'vue.js' Related Articles

티스토리툴바