Vue.js Component 컴포넌트

개요

하나의 페이지를 여러 개의 파일로 나눈 방식

레고처럼 부품을 따로 만들고, 모아서 조립하는 형식으로 각각의 컴포넌트는 .vue 파일이 된다.

각각의 컴포넌트는 필요에 따라서 자식 컴포넌트를 둘 수 있다.

 

컴포넌트는 HomeView로부터 자식 노드가 뻗어가는 형태의 트리 형태로 구현하게 된다.

협업 혹은 가독성을 위해 컴포넌트 파일을 생성할 때 두 개 이상의 명사 결합, 부모를 나타낼 수 있도록 생성해 준다.

 

구현

하기의 순서로 진행하게 된다.

1. 파일 생성
2. 자식 import
3. 부모에 붙이기

1. 파일생성

컴포넌트를 생성해 준다, 각각 header, main, foorter에 들어갈 컴포넌트로 예시를 들어본다.

따라서 각각의 파일명은 다음과 같다.

1. HomeHeader.vue
2. HomeMain.vue
3. HomeFooter.vue

각각의 파일 생성 후 아래와 같이 코드를 작성해 준다.

<script setup>

</script>

<template>
  <h2>현재 컴포넌트의 이름 입력</h2>
</template>

 

 

2. 자식 import

이제 부모 페이지인 HomeView에서 자식들을 import해보자

 

import 사용할 변수 명 from 경로 형식으로 import 해주면 된다.

<script setup>
import HomeHeader from '@/components/HomeHeader.vue';
import HomeMain from '@/components/HomeMain.vue';
import HomeFooter from '@/components/HomeFooter.vue';
</script>

 

@는 src/ 디렉터리를 뜻하는 약어이다.

 

3. 부모에 붙이기

<template> 하위에 자식 요소들을 붙힐 수 있다.

 

<script setup>
import HomeHeader from '@/components/HomeHeader.vue';
import HomeMain from '@/components/HomeMain.vue';
import HomeFooter from '@/components/HomeFooter.vue';
</script>

<template>
  <h1>Home</h1>
  <HomeHeader />
  <HomeMain />
  <HomeFooter />
</template>

 

결과

 

붙힌 순서대로 컴포넌트들이 HomeView에 붙혀진 모습을 볼 수 있다.