보안 전공생의 공부

컴포넌트 정의 및 등록 / 컴포넌트 간의 통신 본문

WEB/Vue

컴포넌트 정의 및 등록 / 컴포넌트 간의 통신

수잉 2021. 1. 27. 18:36

하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어짐.

부품에 문제가 발생하면, 해당 부품만 바꿔도 제품이 문제없이 작동함.

 

But 소프트웨어는 독립적으로 개발 X , 

독립적으로 개발되었다고 해도 다른 모듈과의 호환을 고려 X 개발됨.

 

→ 소프트웨어의 재사용을 어렵게 하고, 유지보수 비용 ↑ 의 원인

 

 

◆ 컴포넌트(component)

: 독립적인 단위모듈 → 이후 시스템 유지보수 하는데 있어 교체 가능한 부품임

  기본 html 엘리먼트 확장해 재사용 가능한 코드를 캡슐화해줌

출처 : https://readystory.tistory.com/40

· 구현, 명세화, 패키지화, 배포될 수 있음 

 - source code가 아닌 execute code기반으로 재사용할 수 있도록 이미 구현이 완료됨

 - 해당 컴포넌트의 용도, 유형, 인터페이스 등에 대한 정보들에 대해 명세화되어 있어야함

 - 교체가능한 컴포넌트 개발을 위해 표준을 준수해 개발해야 함

 - 컴포넌트가 개발되어 배포될 때, 관련 문서와 코드들이 독립적인 단위로 패키지화되어 있어야 함

 - 독립적인 업무단위로 개발된 것 → 사용자가 필요한 기능만을 패키지한 컴포넌트 재사용할 수 있도록 독립적으로 배포 가능해야 함

 

· 하나의 컴포넌트 → 하나 이상의 클래스로 구성 가능

 

· 컴포넌트는 인터페이스를 통해서만 접근 가능

 - 컴포넌트 내의 정보는 외부로부터 모두 숨겨짐 (은닉)

 - 인터페이스(외부에서 접근가능하도록 컴포넌트가 제공하는 서비스를 정의)로 외부와 연결

 - 컴포넌트가 내부 정보를 숨기고, 인터페이스만 제공 => 소프트웨어도 하드웨어처럼 조립 기반으로 가능

 

 

( 참조 : mommoo.tistory.com/55 , thefif19wlsvy.tistory.com/24 )

 

 

◆ 컴포넌트 등록

 

▶ 전역(global) 컴포넌트

 : 여러 인스턴스에서 공통으로 사용가능

 

- 등록 : Vue.component( tagName, options) 를 사용

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

- 사용 : 

<컴포넌트이름> </컴포넌트이름>

로 사용가능

 

 

[예제]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <my-component></my-component>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script>
        //등록
        Vue.component( 'my-component',{
            template : '<div>전역컴포넌트 등록</div>' 
        })

        //루트 인스턴스 생성
        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

<div id="app>

    <div>전역컴포넌트 등록</div>

</div>

와 같이 렌더링 된다.

 

 

▶ 지역(local) 컴포넌트

 : 특정 인스턴스에서만 유효 범위를 가짐

 

- 등록 : 인스턴스에 component 속성 추가 → 다른 인스턴스/컴포넌트의 범위에서만 사용가능한 컴포넌트

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

- 사용 :

<컴포넌트이름> </컴포넌트이름>

로 사용가능

 

 

[예제]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <my-component></my-component>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var cmp ={
            template : '<div>지역컴포넌트 등록</div>'
        };

        new Vue({
            el:'#app',
            components : {
                'my-component':cmp
            }
        });
    </script>
</body>
</html>

components 인스턴스 옵션을 등록해 상위 템플릿에서만 사용가능하도록 함

 

 

( 참조 : kr.vuejs.org/v2/guide/components.html , readystory.tistory.com/40 )

 

◆ 컴포넌트 간 통신

 

컴포넌트는 각각 자체적으로 고유한 유효범위(scope)을 가짐

각 컴포넌트의 유효범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접 참고 X

 

· 같은 레벨에 있는 컴포넌트끼리는 값 참조 X

[예제]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <my-component1></my-component1>
      <my-component2></my-component2>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script>
        //첫번째 컴포넌트 내용
        var cmp1 ={
            template : '<div>첫번째 지역컴포넌트 : {{ data1 }}</div>',
            data : function(){
                return{
                    data1 : 100
                }
            }
        };

        //두번째 컴포넌트 내용
        var cmp2 ={
            template : '<div>두번째 지역컴포넌트 : {{ data2 }}</div>',
            data : function(){
                return{
                    data2 : cmp1.data.data1
                }
            }
        };

        new Vue({
            el:'#app',
            //지역 컴포넌트 등록
            components : {
                'my-component1': cmp1,
                'my-component2': cmp2
            }
        });
    </script>
</body>
</html>

2개의 지역 컴포넌트( my-component1, my-component2 ) 등록하였다.

my-component2 에서는 my-component1 컴포넌트의 data.data1을 참조하고 있다.

그렇다면 일반 javascript에서는 해당 컴포넌트 영역에 100이 출력되어야한다.

 

하지만 데이터가 출력되지 않는 것을 확인할 수 있다.

같은 레벨에 있는 컴포넌트인 my-component1 과 my-component2 는 서로 참조할 수 없는 것이다.

 

 

· 상위(부모) - 하위(자식) 컴포넌트 간 데이터 전달 O

 - 상위 → 하위 : props라는 속성 사용해 데이터 전달 

 - 하위→ 상위 :＄emit을 사용해 이벤트 발생

<상위 → 하위>

- props 속성을 하위 컴포넌트에서 사용 ( props의 속성이름은 반드시 소문자로 ! )

Vue.component('child-component',{
	props: ['속성이름']
});

- 상위컴포넌트의 html 코드에 등록된 child-component 태그에 v-bind 속성 추가

<child-component v-bind:props속성이름="상위 컴포넌트의 data 속성"></child-component>

 

 

<하위 → 상위>

- $emit 속성을 하위 컴포넌트 method에서 사용해 이벤트 발생

this.$emit('이벤트명');

- 하위 컴포넌트에서 발생시킨 이벤트명으로 상위 컴포넌트 method 실행

<child-component v-on:이벤트명="상위컴포넌트 method명"></child-component>

 

( 출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499 , 

readystory.tistory.com/45?category=768807 )

'WEB > Vue' 카테고리의 다른 글

슬롯(slot)  (0) 2021.03.15
이벤트 버스 - 관계 없는 컴포넌트 간 통신  (0) 2021.02.27
디렉터리 | 이벤트 처리 : v-on  (0) 2021.01.27
디렉티브 | v-for, v-bind, v-model  (0) 2021.01.18
디렉티브 | v-if, v-for : 조건 렌더링  (0) 2021.01.18
'WEB/Vue' Related Articles more
Comments