[Vue.js] 컴포넌트란?

1. 컴포넌트란?

컴포넌트랑 조합하여 화며을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 구조화하여 빠르게 개발할 수 있고, 재사용이 아주 용이하다. 뷰에서는 웹 화면을 구성할 떄 흔히 내비게이션 바, 테이블, 리스트, 인풋박스 등의 요소들을 잘개 쪼개서 컴포넌트로 관리한다.

1.1 컴포넌트 등록하기

컴포넌트는 전역, 지역 두 가지가 있다. 당연하게도 지역 컴포넌트는 특정 유효 범위를 가지고 있고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용이 가능하다.

1.1.1 전역 컴포넌트

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

//전역 컴포넌트 생성 - Vue.component(tagName, options)
<div id="app">
    <app-header></app-header>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('app-header', {
        template : '<h1>Header</h1>'
    });
</script>

1.1.2 지역 컴포넌트

지역 컴포넌트는 인스턴스의 속성으로 선언하고, 선언된 인스턴스를 유효 범위로 갖는다.

//지역 컴포넌트 생성 - component{tagName : {options}}
<div id="app">
    <app-contents></app-contents>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el  : '#app',
    components : {
      'app-contents' : {
        template : '<div>지역 컴포넌트입니다.</div>'
      }
    }
  });
</script>

2. 컴포넌트의 특징

뷰에서 컴포넌트는 같은 웹 페이지라도 데이터를 공유할 수 없다.

이 말이 무슨 말이냐면 컴포넌트는 자체적으로 고유한 유효 범위를 갖고 있기 때문에 이 범위를 벗어나서 영향을 미칠 수 없다는 말이다. 아래 예시를 보자.

<div id="app">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
  var component1 = {
    template: '<div>1st local component : </div>',
    data: function() {
      return {
        component1Data : 100
      }
    }
  };

  var component2 = {
    template: '<div>2nd local component : </div>',
    data: function() {
      return {
        component2Data : component1Data.data.cmp1Data   //1st 컴포넌트 값 참조
      }
    }
  };

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

위 코드의 실행 결과를 보면 자바스크립트의 객체 참조 방식을 생각해보면 1st local component와 2nd local component 값이 100이 나올 것 같지만 2nd local component의 값은 아무것도 나오지 않는다. 뷰에서는 컴포넌트가 직접 다른 컴포넌트의 값을 참조하지 못하기 때문이다.

뷰에서는 미리 정의 해놓은 데이터 전달 방식에 따라 일관된 구조로 개발을 하게 되므로, 개발자 개인의 스타일이 도드라지지 않고 동일한 데이터 흐름을 갖게되어 타인의 코드를 파악하기 쉽고 협업에 용의하다.

3. 컴포넌트의 관계

위에서 알아봤듯 컴포넌트간의 값의 참조가 불가능 하다면 어떻게 데이터를 주고 받아야할까? 데이터를 주고 받기 위해선 먼저 컴포넌트의 관계를 알아야 한다.

컴포넌트는 기본적으로 상위, 하위 컴포넌트로 구분되는데 전역 혹은 지역 컴포넌트를 등록하면 등록된 컴포넌트는 하위 컴포넌트가 되고, 하위 컴포넌트가 등록된 인스턴스는 자연스럽게 상위 컴포넌트가 된다.

간단히 생각하면 일반적인 트리구조라고 볼 수 있는데, 부모와 자식 노드의 개념과 동일하다. 다른 독립된 컴포넌트끼리 데이터를 주고 받을 수 없지만 상위 - 하위 개념의 컴포넌트에서는 데이터를 주고 받는게 가능하다.

즉, 같은 레벨의 컴포넌트끼리도 같은 상위 컴포넌트를 공유하고 있다면 데이터를 주고 받을 수 있다는 말이다.

(같은 상위 컴포넌트를 공유하지 않아도 이벤트 버스를 통해 데이터를 주고 받을 수 있지만 이건 나중에 알아보자)

다음 시간에는 컴포넌트 간의 데이터를 주고 받는 방법을 알아보자.