[Vue.js] 컴포넌트 개념 및 사용법

📗 Vue.js

[Vue.js] 컴포넌트 개념 및 사용법

JaeBBang 2024. 10. 16. 13:44

1. 컴포넌트란?

Vue에서 컴포넌트는 UI의 재사용 가능한 단위입니다.

주로 Vue에서 화면의 영역을 구분하여 개발하는데 사용합니다.

그럼 컴포넌트를 사용하는 이유는?🤷‍♂️

코드의 가독성을 높인다.
유지보수가 용이하다.
코드의 중복을 줄일 수 잇다.

Vue에서는 각 컴포넌트는 고유의 데이터, 메서드, 템플릿을 가지고 동작합니다.

페이지에서 주로 Header, Body, Footer와 같은 UI 요소를 컴포넌트로 만들고,

다른 곳에서도 재사용할 수 있어 관리가 편합니다.

컴포넌트를 설명하면서 추가로 말씀드리면,

이전까지의 Vue2에서의 컴포넌트는 options API를 기반으로 작성되었습니다.

하지만 Vue3에서는 Composition API가 도입되었고,

그 중에서도 <script setup> 문법은 더 직관적이고 간결한 방식으로 컴포넌트를 작성할 수 있도록 도와줍니다.

Options API 와 Composition API 의 특징

특징	Options API	Composition API
코드 구조	옵션 객체로 기능을 분리 (data, methods 등)	관련된 로직을 한 곳에 모아서 정의 (ref, computed 등)
유연성	고정된 구조, 재사용 어려움	로직 재사용 가능, 더 유연한 코드 작성 가능
가독성	작은 컴포넌트에 적합	큰 컴포넌트에 적합, 로직이 모듈화됨
상태 관리	각 속성이 나눠져 있음	상태와 메서드가 함께 묶여 관리됨
컴포넌트 규모	작은 규모 컴포넌트에 적합	큰 규모의 복잡한 컴포넌트에 적합

Options API 예제

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('Component mounted!');
  }
};
</script>

<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Vue2에서 자주 사용하는 Optinos API는

주로 data(), methods, computed, mounted 등 각 속성을 객체로 나누어 정의하는 특징을 가지고 있습니다.

Composition API 예제

<script setup>
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('Component mounted!');
});
</script>

<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Vue3에서 주로 사용하는 Compositions API는

주로 ref(), computed(), onMounted() 등 Vue의 기능을 함수로 사용하여 작성하는 특징을 가지고 있습니다.

Vue3에서는 Composition API뿐만 아니라 Options API도 사용이 가능하므로 상황에 맞게 적절히 사용하시면 됩니다.

2. <script setup>이란?

setup() 함수를 직접 정의하지 않고, 그 안에 넣을 내용을 바로 작성할 수 있습니다.
defineProps(), defineEmits() 같은 API는 별도의 임포트 없이 바로 사용할 수 있습니다.
더 간결한 코드 작성이 가능합니다.

<script setup>
import ChildComponent from './ChildComponent.vue'

const message = 'Hello from Parent!'

</script>

<template>
  <div>
    <ChildComponent :msg="message" />
  </div>
</template>

3. 컴포넌트 사용법

다른 컴포넌트를 가져와 템플릿에서 사용하시면 됩니다.

컴포넌트를 가져올 때는 ES 모듈 방식을 사용하고,

예시로 아래와 같이 컴포넌트를 임포트하고 템플릿에 선언하면 됩니다.

<template>
  <div>
    <Main></Main>
  </div>
</template>

<script setup>
import Main from './views/Main.vue'
</script>

<style scoped></style>

제 코드를 비교해서 설명드리도록 하겠습니다.

우선 저는 다음과 같이 설정하였습니다.

App.vue

이전에 알아두면 좋은 것을 먼저 설명드리자면, 동작 실행에 있어서

첫번째로는 main.js에서 시작을 하게 됩니다.

Main.js

// Vue 라이브러리에서 createApp 함수 가져오기
import { createApp } from 'vue'
// 상태 관리를 위해 Pinia 가져오기
import { createPinia } from 'pinia'
// App.vue 파일에서 App 컴포넌트 가져오기
import App from './App.vue'
// 라우터 설정 가져오기
import router from './router'
// App 컴포넌트를 기반으로 Vue 애플리케이션을 생성
const app = createApp(App)
// 상태 관리 라이브러리인 Pinia를 사용하도록 등록
app.use(createPinia())
// Vue Router를 애플리케이션에 등록
app.use(router)
// #app이라는 ID를 가진 DOM 요소에 애플리케이션을 마운트
app.mount('#app')

Vue를 랜더링하기까지의 과정은 아래와 같습니다.

3-1. 애플리케이션 생성

main.js에서 createApp(App)을 호출하여 Vue 애플리케이션을 생성합니다.
App.vue에서 정의된 App 컴포넌트가 애플리케이션의 최상위 컴포넌트로 설정됩니다.

3-2. 플러그인 등록

createPinia()를 사용해 Pinia 상태 관리 라이브러리를 애플리케이션에 등록하여금, 애플리케이션 내에서 상태를 관리할 수 있습니다.
app.use(router)를 통해 Vue Router를 등록하여 SPA(Single Page Application) 기능을 추가합니다.

3-3. DOM에 마운트

app.mount('#app')를 호출하여 HTML 파일에서 id="app"인 요소에 Vue 애플리케이션을 마운트합니다. 이 과정에서 Vue는 App.vue에 정의된 내용을 기반으로 UI를 렌더링합니다.

3-4. App.vue 렌더링

App.vue의 <template> 부분이 DOM에 렌더링되고, 그 안에서 제가 설정한 <Main></Main> 컴포넌트가 호출됩니다.
<script setup> 내의 import Main from './views/Main.vue'를 통해 Main.vue를 가져오고, 이를 <Main> 태그로 사용하여 Main 컴포넌트를 UI에 추가합니다.

위를 기반으로 다시 돌아가서 설명을 드리면,

App.vue는 최상위 컴포넌트로, 이곳에서 다른 컴포넌트를 포함하거나 라우터를 설정할 수 있습니다.

우선 저는 views라는 폴더에 Main.vue라는 vue파일을 만들고 동시에 선언을 하였습니다.