Vue.js 컴포넌트

 

컴포넌트

 Vue.js 에서 컴포넌트는  재사용이 가능한 UI 블록을 의미합니다. 즉, Vue.js 앱을 모듈와하고 유지 보수를 용이하게 만들어 주는 핵심 요소라 할 수 있습니다. 예를 들어 버튼, 카드, 모달, 댓글 입력 등등 이런 화면 ui 요소들이 각각 하나의 컴포넌트가 될 수 있습니다.  

 물론 SPA 웹의 특성상 하나의 파일에서 화면 개발을 하는 것도 가능합니다. 그렇지만  아래와 같은 이유들로 Vue.js 에서는 화면 구성을 컴포넌트로 분리하여 개발하는 것을 지향합니다.

1. 재사용성 : 한 번 만든 컴포넌트는 필요한 경우 여러 곳에서 반복하여 사용하는 것이 가능합니다.
2. 유지보수 용이 : 각 기능과 독립된 파일로 나위어 있어, 하나의 파일만 수정해도 사용한 전체를 수정하는 것이 가능
3. 가독성 향상 : 코드가 기능별로 명확하게 나누어져 있어 가독성이 뛰어남
4. 협업에 적합 : 화면을 모듈별로 경량화 하여 대규모 개발에 적합하며, 업무분담 용이

 컴포넌트를 구성하는 방법은 크게 두가지로 나뉩니다. JS로 구성하는 법과 SFC(단일 파일 컴포넌트) 형태로 작성하는 법 이 두가지로 보통 나뉘는데, Vue.js에서는 SFC로 형태로 작성하는 법을 일반적으로 사용합니다.

 

컴포넌트 등록하기

컴포넌트 조합

 컴포넌트를 사용하기 위해선 <script> 태그 안에  JS로 SFC 파일을 import 합니다. 예를 들어 이전 포스팅 들에서 사용했던 SFC 컴포넌트들을 한 화면에 표기하는 예제를 살펴보겠습니다.

<template>
    <div>체크된 이름: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="젝" v-model="checkedNames">
    <label for="jack">젝</label>

    <input type="checkbox" id="john" value="존" v-model="checkedNames">
    <label for="john">존</label>

    <input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
    <label for="mike">마이크</label>
    
    <Increment/>
</template>

<script>
import Increment from './Increment.vue'

export default {
  components: { Increment },
  data() {
    return {
      checkedNames: []
    }
  }
}
</script>

<style>

</style>

위와 같이 체크박스에 대한 컴포넌트와 버튼 이벤트 관련 컴포넌트를 조합해 하나의 화면에서 컴포넌트를 조합하는 것이 가능합니다.

컴포넌트 전역 등록

컴포넌트는 템플릿을 발견할 때 Vue.js가 필요할 때 가져다 쓸 수 있도록 위치를 등록 해야 합니다 컴포넌트를 등록하는 방법은 전역등록과 로컬 등록이 있습니다. 먼저 전역 등록은 Vue 앱 전체에서 컴포넌트를 전역으로 사용할 수 있도록 지정하는 방법입니다. 전역 등록은 app.component() 매서드를 통해 등록이 가능합니다.

/*=======JS 등록 에제=============*/
import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 등록될 이름
  'MyComponent',
  // 구현체
  {
    /* ... */
  }
)
/*=======SFC 등록 에제=============*/
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)

/*=======여러개 등록시 연결해서 사용 가능=============*/
app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

위 예제에서 언급한 방식대로  컴포넌트를 전역 앱  내의 모든 컴포넌트의 템플릿에서 사용이 가능합니다. 하지만 전역 등록에는 몇 가지 단점이 있습니다.

1. 의존석 명확성 저하  : 어디서나 쓸 수 있지만, 반대로 어디서 사용되는지 알기 어려움
2. 컴포넌트 충돌 위험 증가 : 전역으로 선언한 컴포넌트이기 때문에 각 컴포넌트와 이름 충동 가능성이 높음
3. 성능 저하 : 불필요하게 전역 등록을 다수 등록할 경우 초기 로딩 속도를 느리게 할 수 있음

즉, 전역 등록은 상황에 따라 좋은 선택이 될 수 있으나, 남용 된다면  여러가지 단점들을 가지고 있습니다.

컴포넌트 로컬 등록

로컬 등록은 전역 등록과 달리 컴포넌트의 가용범위를 등록한 컴포넌트 내로 제한합니다. 의존 관계를 더욱 명시적으로 선언하며 앞서 전역 등록의 단점들이 생길 가능성이 없기 때문에 대부분 권장되는 방식입니다.

하지만 공통적으로 매번 사용하는 컴포넌트에 등록해야하는 경우가 생길 수 있기 때문에 불필요한 반복 작업이 많아 질 수 있습니다. 결론적으로 공통 컴포넌트의 경우 전역 등록 ,이외 대부분의 컴포넌트는 로컬 등록으로 처리 한다면  웹 화면 구성에 적합한 선택이 될 수 있습니다.