[Vue] 컴포넌트

https://github.com/wikibook/vue3-springboot

GitHub - wikibook/vue3-springboot: 《Vue 3와 스프링 부트로 시작하는 웹 개발 철저 입문》 예제 코드

 

 

컴포넌트란?

애플리케이션을 구성하는 재사용 가능한 요소로 .vue인 파일을 Vue 컴포넌트라고 합니다.

자동차 엔지니어가 핸들, 엔진, 타이어 등 여러 부품들을 조합해 자동차를 만들듯이 개발자도 로그인, 회원가입, 장바구니 등과 같은 여러 컴포넌트를 조합하여 애플리케이션을 생성할 수 있습니다.

 

컴포넌트는 아래 코드와 같이 script, template, style 세 개의 블록으로 구성됩니다.

// /src/components/FrontWheel.vue
// SFC(Single File Component): 하나의 파일 안에 템플릿, 스크립트, 스타일 블록을 함께 정의할 수 있는 구조의 컴포넌트. 이러한 SFC는 스크립트 블록과 템플릿 블록 중 하나를 반드시 포함해야 함.
// setup: 셋업 훅을 의미함. 셋업 훅은 컴포넌트가 생성될 때 실행되는 훅으로 데이터를 설정하고 로직을 정의하는 역할을 함

<script setup></script>

<template>
<div class="front-wheel">
    <span>FRONT WHEEL</span>
    </div>
</template>

<style scoped>
/* scoped: 해당 스타일이 이 컴포넌트에만 지정되게 */
.front-wheel{
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
}
</style>

 

 

/src/App.vue 에 스크립트 블록에 사용하고자 하는 컴포넌트를 임포트하고, 템플릿 블록에서 사용하고자 하는 컴포넌트의 이름을 태그 형태로 입력하여 사용 가능합니다.

// src/App.vue
<script setup>
import FrontWheel from "@/components/FrontWheel.vue";
</script>

<template>
  <FrontWheel/>
</template>

 

 

이때 컴포넌트를 사용하는 주체를 부모 컴포넌트(App.vue), 부모 컴포넌트의 의해서 사용되는 객체를 자식 컴포넌트(FrontWheel.vue)라고 합니다.