Emma.log()

vue 컴포넌트 본문

Front-End/Vue

vue 컴포넌트

EverJunior Minjoo 2022. 12. 14. 14:40

컴포넌트

컴포넌트란 조합해서 화면을 구성할수 있는 블록(화면의 특정 영역)을 의미한다.

컴포넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발할수있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할수있는 형태로 관리하면 나중에 코드를다시 사용하기가 훨씬 편리하다. 또 모든 사람들이 정해진 방식으로 컴포넌트를 등록하고나 사용하게 되서 다른 사람들의 코드도 직관적으로 이해할수있다.

뷰에서는 웹화면을 구성할때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋박스 등과 같은 화면 구성요소들을 잘게 쪼개어 컴포넌트로 관리한다.

화면 전체를 header / content/ footer 로 분할하고 다시 content부분을 list1 과 list2 로 분할 했다. 이는 화면 전체를 3개의 컴포넌트로 분할한뒤 분할된 1개의 컴포넌트에서 다시 2개의 하위 컴포넌트로 분할한것이다. 

오른쪽 그림은 각 컴포넌트 간의 관계를 나타낸다. 컴포넌트간의 관계는뷰에서 화면을 구성하는데 매우 중요한 역할을 하며, 웹페이지 화면을 설계할 때도이와 같은 골격을 유지하며 설계해야한다.

 

컴포넌트 등록

컴포넌트는 전역과 지역의 두가지 방법으로 등록할수있다. 지역 컴포넌트(local component)는특정 인스턴스에서만 유효한 범위를 갖고, 전역컴포넌트(global component)는 여러 인스턴스에서 공통으로 사용할수있다. 

전역 컴포넌트 등록

전역컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용해서등록한다.

전역컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출해서 수행하면된다.

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

전역 컴포넌트 등록형식에는 컴포넌트 이름과 컴포넌트 내용이들어간다.

컴포넌트 이름은 template 속성에서 사용할 HTML사용자 정의태그- 커스텀태그의 이름을 의미한다.

태그 이름의 명명규칙은 HTML사용자 정의 태그 스팩에서 강제하는 모두 소문자와 케밥기법(단어의 조합일때 - 이용)을 따르지 않아도 된다.

컴포넌트 태그가 실제 화면의 HTML요소로 변환될때 표시될 속성들을 컴포넌트 내용에 작성한다.

컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션속성을 정의할수 있다.

전역컴포넌트 처리과정

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

인스턴스가 생성되고, 인스턴스 내용이 화면요소로 변환될때 컴포넌트 태그도 함께변환된다.

따라서 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 볼수있는 형태의 화면요소로 최종 변환된다.

전역 컴포넌트를 등록하려면 HTML 에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {} 안에 HTML태그가 실제로 화면에 그려질때 표시될 내용(컴포넌트 내용)을 작성해야한다.

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <button>컴포넌트 등록</button>
            <my-component></my-component>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            Vue.component('my-component',{
                template:'<div>전역 컴포넌트가 등록되었습니다.</div>'
            });
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html><html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <button>컴포넌트 등록</button>
            <my-component></my-component>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            Vue.component('my-component',{
                template:'<div>전역 컴포넌트가 등록되었습니다.</div>'
            });
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html>

이렇게 작성되면 해당위치 <my-component></my-component>자리에 등록한 <div>전역 컴포넌트가 등록되었습니다.</div> 코드가 그려진다.

 

지역 컴포넌트 등록

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

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

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

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <button>컴포넌트 등록</button>
            <my-local-component></my-local-component>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            var cmp = {
                // 컴포넌트 내용
                template:'<div> 지역 컴포넌트가 등록되었습니다! </div>'
            };
            new Vue({
                el:'#app',
                components:{
                    'my-local-component':cmp
                }
            })
        </script>
    </body>
</html>

위 코드에서 보듯 변수 cmp에 화면에 나타낼 컴포넌트의 내용을 정의한다. 컴포넌트 내용에 template, data, methods 등 여러 속성이 들어갈수 있다. template 속성에 <div>태그 한개설정한다.

그리고 아래에 Vue인스턴스에 components속성을 추가하고, 컴포넌트 이름에 my-local-component 를 컴포넌트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정한다.

 

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

두 차이를 보려면 유효 범위를 알아야한다. 

<html>
    <head>
        <title>Vue Component Registration</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> 2번째 인스턴스 영역</h3>
            <my-global-component></my-global-component>
            <my-local-component></my-local-component>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <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속성으로 등록할 필요없이 한번 등록하면 어느 인스턴스에서든지 사용할수있다. 반면 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야한다.

첫번째 인스턴스의 유효범위는 첫번째 인스턴스 영역으로 제한되서 app 에 지역컴포넌트를 등록해도, app2의 범위 안에서는 지역인스턴스가 인식되지 않는다. 

 

참고서적 : Do it vue.js 입문

저작자표시 비영리 (새창열림)

'Front-End > Vue' 카테고리의 다른 글

뷰 라우터  (0) 2022.12.15
vue 컴포넌트 통신  (0) 2022.12.14
vue 인스턴스, 인스턴스 속성, 인스턴스 라이프 사이클  (0) 2022.12.14
vue 프로젝트 시작하기  (0) 2022.12.14
Vue 개발환경 설정  (0) 2022.12.14
'Front-End/Vue' Related Articles more