[Vue.js] 컴포넌트(component)란 무엇인가?

이번 포스트에서는 컴포넌트에 대해서 다뤄보겠습니다.

 

컴포넌트(component) 개념

컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다.

Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다.

 

출처: Vue.js 공식문서, 컴포넌트 구성

위 그림은 왼쪽은 화면 오른쪽은 컴포넌트를 분할해 나눠둔 것이다. 컴포넌트를 그림으로 설명하자면 오른쪽에 블록 한 개가 하나의 컴포넌트를 만들어 둔 것이다. 이 컴포넌트들을 사용해서 조합하여 사용하면 그게 화면으로 변하는 것이다. 간혹 홈페이지들을 보면 반복돼서 사용하는 블록들이 있을 것이다. 그런 것들을 컴포넌트로 만들어서 <component /> 이렇게 태그 한 줄 작성으로 재사용성이 매우 좋게 만들어 주는 역할을 하는 것이 컴포넌트이다.

출처: Vue.js 공식문서, 컴포넌트간 데이터 전달방식

Vue는 양방향 데이터 바인딩을 지원 하지만 컴포넌트간 데이터 이동에서는 단방향 이동만 가능합니다.

부모 컴포넌트에 있는 데이터를 자식 컴포넌트에게 보낼 때는 props로 변수에 값을 넣어주어서 보낼 수 있지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기기 위해서는 Event를 사용해야지만 데이터를 넘겨줄 수 있습니다.

 

컴포넌트 장점

• 재사용성이 매우 뛰어납니다.
• 단위 테스트가 용이합니다.

 

컴포넌트(component)의 두가지

Vue의 컴포넌트는 두 가지가 존재합니다. 전역 컴포넌트(Global Component), 지역 컴포넌트(Local component)

• 전역 컴포넌트(Global Component): 여러 인스턴스에서 직접적으로 import하지 않고 사용 가능한 컴포넌트
• 지역 컴포넌트(Local component): 특정 인스턴스에서 직접 import 해서 사용 가능한 컴포넌트, A장소에서 q의 컴포넌트를 import 하고 B장소에서 q 컴포넌트를 사용할 수 없습니다. 사용하려면 B장소에서도 import 해야 합니다.