Vue.js 알아보기 - Component, Vue 3 컴포넌트 만들기

What is, and Why we use Component?

먼저 컴포넌트에 대해서 이야기해봐야 겠다. 컴포넌트는 마치 하나의 Instance라고 할 수 있으며, 템플릿을 여러 파로 자를 수 있는 거의 유일한 방법이다. 또한 코드의 재사용성을 높여주는 하나의 방법이라고도 할 수 있다. 일단은 Vue의 Single File Component(SFC)에 대해 이야기해보겠다. Vue의 SFC는 이미 완벽한 유저 인터페이스 단위로, HTML 마크업과 상호작용을 위한 스크립트 그리고 표현을 위한 스타일로 이루어져있다. 추상적인 레벨에서 SFC는 다음과 같은 섹션으로 이루어져 있다.

• Template
• Script
• Style

내가 짠 코드 중에 다음과 같은 코드 부분을 예시로 들어서 이야기해 보겠다.

<template>
  <v-app-bar :drawer="drawer" color="primary">
    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    <v-app-bar-title>Back Door JJal Bang</v-app-bar-title>
  </v-app-bar>
  <BarDrawer v-model="drawer"></BarDrawer>
</template>
<script>
import BarDrawer from "./BarDrawer";

export default {
  name: "NavBar",
  components: {BarDrawer},
  data() {
    return {
      drawer: false
    };
  },
};

</script>

 

Template Section

Template파트는 HTML 마크업 코드를 붙여넣는 곳으로, 이와 동시에 데이터 변수라든지, 스크립트에 작성된 코드를 통해 계산된 속성을 넣을 수 있다. 만약 이 Template코드가 굉장히 길다면 이 부분을 자식 컴포넌트로 분리해보는 것을 생각해야 한다. 위의 코드에서느 <BarDrawer ~~></BarDrawer> 부분이 그러한 예시라고 볼 수 있다.

 

Script Section

Script파트에서는 지역 데이터라든지, props, computed properties, watchers, methods등등 Vue의 라이프 사이클 훅에 따른 것을 적는다. 위의 코드에서는 components하고 data에 필요한 것들을 적었다.

 

Style Section

 

마지막으로 Style Section에는 컴포넌트의 스타일을 위한 CSS라든지, SCSS 등을 적을 수 있다.

 

위의 코드를 각각 파트에 나누어서 보면 다음과 같이 나눌 수 있다.

다음 시간에는 Vue의 라이프 사이클 훅에 대해 알아보겠다.