Vue의 컴포넌트란

 

Vue에서의 컴포넌트(Component)는 웹 페이지를 구성하는 UI(사용자 인터페이스) 요소를 재사용 가능한 독립적인 조각으로 나눈 기본 단위입니다.

쉽게 말해, 레고 블록으로 큰 성을 쌓듯 작은 UI 블록(컴포넌트)들을 조합하여 하나의 완성된 웹 애플리케이션을 만드는 방식입니다.

1. 컴포넌트의 특징

Vue 컴포넌트는 단노드 컴포넌트 파일인 SFC(Single File Component, .vue 파일)로 작성되는 것이 일반적입니다. 하나의 파일 안에 HTML, JS, CSS가 모두 모여있습니다.

• 캡슐화(Encapsulation): UI의 모양(HTML), 동작(JS), 스타일(CSS)을 한 파일 안에서 완벽하게 관리합니다.
• 재사용성(Reusability): 버튼, 입력 폼, 네비게이션 바 등 자주 쓰이는 UI 요소를 만들어두고 필요할 때마다 가져와 재사용합니다.
• 유지보수성(Maintainability): 코드 수정이 필요할 때 해당 컴포넌트 파일만 수정하면 되므로 전체 프로젝트 구조를 파악하고 관리하기 쉬워집니다.

2. .vue 컴포넌트의 기본 구조

.vue 파일은 크게 3가지 영역으로 나뉩니다.

코드 스니펫

<script setup>
// 1. Logic (JavaScript/TypeScript)
// 데이터(상태), 이벤트 함수, 비동기 로직 등을 정의합니다.
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <!-- 2. UI Template (HTML) -->
  <!-- 화면에 실제로 그려질 HTML 구조를 작성합니다. -->
  <div class="card">
    <p>현재 카운트: {{ count }}</p>
    <button @click="increment">1 증가</button>
  </div>
</template>

<style scoped>
/* 3. Style (CSS) */
/* scoped 속성을 붙이면 이 스타일은 현재 컴포넌트에만 적용됩니다. */
.card {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>

3. 컴포넌트 간 통신 (데이터 주고받기)

컴포넌트들이 부모-자식 관계를 형성할 때, 데이터는 다음과 같은 방식으로 흐릅니다.

       [ 부모 컴포넌트 (Parent) ]
                   │
    Props (데이터 전달) │  ▲ Event / Emit (상태 변경 요청)
                   ▼  │
       [ 자식 컴포넌트 (Child) ]

1. Props (부모 → 자식): 부모 컴포넌트가 자식 컴포넌트에게 데이터를 아래로 내려줄 때 사용합니다.
2. Emit (자식 → 부모): 자식 컴포넌트에서 클릭 등의 이벤트가 발생했을 때, 부모에게 알리거나 상위 상태 변경을 요청할 때 사용합니다.

4. Leptos 컴포넌트와의 비교 (Rust 백엔드 관점)

질문자님께서 앞에서 질문해주신 Leptos(Rust)와 비교해 보면 개념 이해가 더욱 쉽습니다.

비교 항목 Vue 컴포넌트 Leptos 컴포넌트 (Rust)

선언 방식	.vue 파일 또는 defineComponent()	#[component] 매크로가 붙은 Rust 함수
UI 작성	<template> 태그 (HTML 문법)	view! { ... } 매크로 (JSX 스타일)
반응형 상태	ref(), reactive()	create_signal()
컴파일 대상	JavaScript (또는 Vite를 통한 번들링)	WebAssembly (Wasm)

Vue는 웹 프론트엔드 생태계에서 매우 직관적이고 진입 장벽이 낮아 가장 널리 쓰이는 컴포넌트 기반 프레임워크 중 하나입니다.