Vue 컴포넌트 다루기

뷰에서는 복잡한 구조를 보다 심플하고 유연하게 제공하기 위해 컴포넌트, 슬롯, 데이터 공유 기술을 제공하고 있다.

유연하고, 모듈화된 구조로 개발하고 관리하기 좋다. 코드의 재사용성과 유지보수성 향상도 가능하다.

 

컴포넌트(Componet)

• 자바스크립트 기반 프레임워크에서의 애플리케이션을 구성하고 관리하는 방식.
• 특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위.

컴포넌트 기반 아키텍처(CBA, Component-Based Architecture)

• 한 웹 어플리케이션을 여러 컴포넌트로 구분해, 페이지 단위가 아니라 컴포넌트 단위로 설계하는 방식.
• Vue.JS --> 컴포넌트 기반 아키텍처

컴포넌트 기반 아키텍처 설계 방식의 장점

• 재사용성(reusability) : 컴포넌트를 같은 기능이나 작업이 필요한 곳에서 재사용 가능.
• 독립성(independence) : 다른 컴포넌트에 영향을 주지 않고 특정 컴포넌트만 독립적으로 수정 및 교체가 가능.
• 모듈성(modularity) : 웹 어플리케이션을 개별 단위로 구분하기 때문에 복잡성이 줄어듦.
• 확장성(extensible) : 컴포넌트에서 구성 요소를 추가하거나 수정해 새로운 동작이나 기능 제공.
• 캡슐화(encapsulation) : 내부의 복잡성을 숨기고, 단순하게 기능만 사용할 수 있는 인터페이스 제공. 컴포넌트의 내부 로직이나 상태 처리 로직을 알지 못해도 컴포넌트를 이용하여 화면을 구성할 수 있다.

컴포넌트 네이밍 컨벤션

• 두 단어 이상으로 조합하는 파스칼 케이스를 권장
• ex) PaymentList, UserInfo

컴포넌트 1개를 생성했고, 만든 컴포넌트(FristChie.vue)를 뷰에서 사용하려면 컴포넌트 등록이 필요하다.

등록하는 방법 2가지

• 전역등록(global)
  • 컴포넌트를 뷰 app의 모든 곳에서 사용할 수 있다.
  • src/main.js에서 app.component()로 등록한다.

import { createApp } from 'vue'

import App from './App.vue'

import FirstChild from '@/components/FirstChild.vue'

import SecondChild from './components/SecondChild.vue';

import ThirdChild from './components/ThirdChild.vue';

// createApp(App).mount('#app')

const app = createApp(App);

app.component('FirstChild', FirstChild);

app.component('SecondChild', SecondChild);

app.component('ThirdChild', ThirdChild);

app.mount('#app');

• 지역등록(local)
  • src/App.vue의 script 태그에 등록한다.

<script>

import FirstChild from './components/FirstChild.vue';

import LocalChild from './components/LocalChild.vue';

import SecondChild from './components/SecondChild.vue';

import ThirdChild from './components/ThirdChild.vue';

//local component 등록

export default{

components :{

LocalChild,

}

}

</script>

<template>

<FirstChild></FirstChild>

<SecondChild></SecondChild>

<ThirdChild></ThirdChild>

<LocalChild></LocalChild>

</template>

<style scoped>

h1{

color: black;

}

p{

color: black;

}

</style>

ㅁㄴㅇㅁㄴㅇㅁ