Vue.js는 컴포넌트 기반의 웹 애플리케이션 개발을 간편하게 만드는 강력한 도구입니다. 이번 포스팅에서는 Vue 컴포넌트의 개념과 사용법을 살펴보고, 실제 예제를 통해 어떻게 모듈화된 애플리케이션을 개발할 수 있는지 알아보겠습니다.
컴포넌트란 무엇인가요?
컴포넌트는 Vue.js 애플리케이션을 구성하는 빌딩 블록입니다. 각각의 컴포넌트는 화면의 특정 부분을 나타내며, 데이터와 뷰를 결합하고 재사용 가능합니다. Vue 컴포넌트를 사용하면 복잡한 애플리케이션을 작은 조각으로 나누어 개발할 수 있어 유지보수와 확장이 쉽습니다.
Vue 컴포넌트 생성
Vue 컴포넌트를 생성하려면 다음 단계를 따릅니다.
- Vue 파일 생성:
.vue확장자를 가진 파일을 생성합니다. 이 파일에는 컴포넌트의 템플릿, 스크립트, 스타일이 정의됩니다. - 템플릿 작성: 컴포넌트의 템플릿은 HTML과 유사하게 작성됩니다. Vue 템플릿 문법을 사용하여 데이터를 표시하고 이벤트를 처리합니다.
- 스크립트 작성: 컴포넌트의 동작을 정의하는 JavaScript 코드를 작성합니다. 데이터, 메서드, 라이프사이클 훅 등이 여기에 포함됩니다.
- 스타일 작성: 컴포넌트의 스타일을 정의합니다. CSS나 CSS 프리프로세서 (예: SASS, LESS)를 사용할 수 있습니다.
Vue 컴포넌트 예제
간단한 Vue 컴포넌트를 만들어 보겠습니다. 이 컴포넌트는 할 일 목록을 관리하는 간단한 할 일 애플리케이션입니다.
할 일 목록 컴포넌트 (TodoList.vue)
<template>
<div>
<h2>할 일 목록</h2>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, text: 'Vue 공부하기' },
{ id: 2, text: '컴포넌트 개발하기' },
{ id: 3, text: '할 일 앱 완성하기' }
]
};
}
};
</script>
<style scoped>
/* 스타일 작성 */
</style>
위 코드에서 주요 부분은 다음과 같습니다.
<template>: 컴포넌트의 템플릿 부분으로, 할 일 목록을 나타냅니다.<script>: 컴포넌트의 데이터와 동작을 정의하는 부분입니다.data속성에 할 일 목록 데이터가 포함되어 있습니다.<style>: 컴포넌트의 스타일을 정의하는 부분입니다.scoped속성은 컴포넌트 내에서만 스타일이 적용되도록 합니다.
컴포넌트 사용
이제 만든 컴포넌트를 사용해보겠습니다. 다음은 이를 어떻게 하는지 보여주는 예제입니다.
앱 컴포넌트 (App.vue)
<template>
<div id="app">
<todo-list></todo-list>
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
components: {
TodoList
}
};
</script>
<style>
/* 전역 스타일 */
</style>
위 코드에서 TodoList 컴포넌트를 import 하고, components 속성에 등록하여 사용할 수 있습니다. 그리고 <todo-list></todo-list>를 통해 컴포넌트를 화면에 렌더링합니다.
결론
Vue 컴포넌트를 사용하면 애플리케이션을 모듈화하고 재사용 가능한 부분으로 나눌 수 있습니다. 이렇게 모듈화된 접근 방식은 애플리케이션의 구조를 보다 체계적으로 만들어주며, 유지보수와 협업을 더욱 효율적으로 만듭니다. Vue.js의 컴포넌트 기능을 활용하여 웹 애플리케이션을 더욱 강력하게 만들어보세요!
이상으로 Vue 컴포넌트를 사용한 모듈화된 웹 애플리케이션 개발에 대한 간단한 소개와 예제를 제시했습니다. 앞으로 Vue.js의 더 많은 기능과 고급 주제를 탐구해보세요.