[Vue] 다양한 Component 활용법!

HOU·2022년 6월 23일

Vue

목록 보기

5/5

✌Component란?

컴포넌트에 대해서 검색해보니, 엄청나게 많은 이야기가 나오고 하드웨어 컴포넌트 -> 소프트웨어 컴포넌트 -> 객체지향 컴포넌트 (CBD) 등등 굉장히 많은 이야기가 나오는 것을 알 수 있었다.
but 우리는 vue에서 말하는 컴포넌트에 대해서 알아야 하니까! 기능과 디자인을 모아둔 조각 정도로 생각하자!

Vue Component

기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움이 된다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트(요소)이다.

✌Component의 장점?

컴포넌트는 기능과 디자인을 모아둔 조각이라고 했다. 그러면 뭐가 좋을까 그 코드를 다른 곳에서도 사용할 수 있을것이다. 그리고 수정하고 싶은 부분이 있다면 컴포넌트만 수정하면 그 컴포넌트를 사용한 다른 곳도 모두 변경될 것이다. 유지보수성이 향상 될 것이다.

✌Vue에서 Component 사용법

뷰 컴포넌트는 전역 컴포넌트와 지역 컴포넌트로 나뉜다.

전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용될 수 있는 컴포넌트
지역 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 가지는 컴포넌트

전역변수와 지역변수의 차이 정도라고 생각하면 좋을거 같다.

전역선언

등록 방법
Vue.component("컴포넌트 이름" ,"옵션")
컴포넌트를 사용할 때 사용할 이름,
옵션: 컴포넌트를 렌더링 할 때 필요한 여러 옵션들
사용 순서
1) 사용할 컴포넌트 만들기(Header.vue, Footer.vue)
Header.vue

<template>
  <header>Memo App</header>
</template>
<style scoped>
header {
  text-align: center;
  padding: 25px;
  border-bottom: 1px solid #eee;
  background: #f7f7f7f7;
}
</style>

Footer.vue

<template>
  <footer>&copy;2022 Memo App. All rights reserved</footer>
</template>

<style scoped>
footer {
  background: #f7f7f7;
  border-top: 1px solid #eee;
  padding: 25px;
}
</style>

2) header와 footer를 넣어둘 상위 컴포넌트 안에 넣어줍니다.
Ground.vue

<template>
  <div class="ground">
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from "./Header.vue";
import Footer from "./Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>

<style></style>

Header.vue와 Footer.vue를 import하여 Ground.vue안 componets에 넣어주었습니다.

3) 이제 최상위 app.vue에 Ground.vue를 넣어 주겠습니다.

App.vue

<template>
  <Ground />
</template>

<script>
import Ground from "./components/Ground.vue";

export default {
  // name: "App",
  components: {
    Ground,
  },
};
</script>

<style></style>