[Vue.js] 컴포넌트(component) 사용하기 feat. Vue-CLI

이번 포스트에서는 컴포넌트(component)를 만들고 어떻게 사용하는지에 대해서 다뤄보겠습니다.

 

컴포넌트(component) 만들기

• 프로젝트이름/src/components/Btn.vue

<template>
  <div class="btn">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'JavaScript',
    },
  },
};
</script>

<style>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
</style>

• 프로젝트이름/src/App.vue

<template>
  <Btn />
  <Btn text="Vue.js" />
</template>

<script>
import Btn from './components/Btn.vue';

export default {
  name: 'App',
  components: {
    Btn,
  },
};
</script>

<style></style>

1. App.vue와 같은 위치에 components 폴더를 만들고 원하는 컴포넌트 파일을 만듭니다. - Btn.vue
2. 저는 박스 안에 text(props)를 받아서 글자를 출력하기 위해서 script에서 props - text를 등록해줍니다. type은 String, text(props)를 넘겨주지 않았을 경우 기본값(default)으로 JavaScript를 등록해줍니다.
3. App.vue 파일로 돌아와 script에 컴포넌트 파일을 import 하고 components에 등록후에 template에 <Btn />에 작성한다.

설명과 같이 text(props) 데이터를 작성하지 않았을 때는 JavaScript로 출력하고 Vue.js를 보냈을 때는 그대로 출력하게됩니다. 이와같이 props를 보낸다면 다양하게 활용할 수가 있습니다.

 

전역(Global) 컴포넌트 만들기

전역(Global) 컴포넌트는 어느곳에서나 import를 따로 작성하지 않고 컴포넌트를 사용할 수 있게 설정해줍니다.

• 프로젝트이름/src/components/Btn.vue

<template>
  <div class="btn">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'JavaScript',
    },
  },
};
</script>

<style>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
</style>

• 프로젝트이름/src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import Btn from './components/Btn.vue';

createApp(App)
  .component('Btn', Btn)
  .mount('#app');

• 프로젝트이름/src/App.vue

<template>
  <Btn />
  <Btn text="Vue.js" />
</template>

<script>
export default {
  name: 'App',
};
</script>

<style></style>

이와 같이 App.vue 파일에서 Btn.vue 파일을 import 하지않고 컴포넌트(component)를 사용하는 것을 보실 수 있습니다. 

지역 컴포넌트는 처음 챕터 컴포넌트(component) 만들기에서 보여드린 방법과 동일합니다. App.vue에서 Btn.vue 파일을 직접 import 해서 컴포넌트를 사용하시는 것을 볼 수 있습니다.

 

여러분도 전역 컴포넌트와 지역 컴포넌트를 알맞은 상황게 맞게 사용하면 효율적인 개발을 하실 수 있습니다.