[Vue] - Vue 기본적인 구조

Vue.js의 기본 구조

Vue.js로 애플리케이션을 개발할 때, 가장 기본적인 단위는 컴포넌트입니다. Vue는 이 컴포넌트들을 조합하여 사용자 인터페이스(UI)를 구성하며, 이를 통해 복잡한 애플리케이션도 체계적으로 관리할 수 있습니다. 여기서는 Vue의 기본 구조와 이를 구성하는 주요 요소들을 살펴보겠습니다.

1. Vue 인스턴스

Vue 애플리케이션의 핵심은 Vue 인스턴스입니다. Vue 인스턴스는 Vue 객체를 생성하여 DOM을 조작하고, 데이터를 바인딩하며, 이벤트를 처리하는 기능을 제공합니다. 일반적으로 new Vue() 명령어를 통해 생성됩니다.

new Vue({
  el: '#app', // Vue 인스턴스가 적용될 DOM 요소
  data: {
    message: 'Hello Vue!'
  }
});

위 예제에서 el은 Vue 인스턴스가 어느 DOM 요소에 마운트될지를 결정하고, data는 해당 인스턴스의 데이터 속성을 정의합니다.

2. 템플릿 (Template)

Vue는 HTML 기반의 템플릿 문법을 사용하여 뷰를 렌더링합니다. 템플릿은 Vue 인스턴스의 데이터를 동적으로 화면에 표시할 수 있게 해줍니다. 보통 HTML 요소와 Vue의 디렉티브를 조합하여 사용합니다.

<div id="app">
  <p>{{ message }}</p>
</div>

위 예제에서 {{ message }}는 Vue의 템플릿 문법을 사용하여 data 속성에 정의된 message를 화면에 렌더링합니다.

3. 데이터 바인딩

Vue는 양방향 데이터 바인딩을 지원합니다. 데이터와 뷰가 자동으로 연결되며, 데이터가 변경되면 화면이 자동으로 갱신됩니다. 데이터 바인딩은 크게 단방향과 양방향이 있습니다.

• 단방향 바인딩: 데이터를 뷰에 표시할 때 사용합니다. 예를 들어, v-bind를 사용해 HTML 속성을 데이터에 바인딩할 수 있습니다.
• 양방향 바인딩: 사용자 입력을 데이터와 동기화할 때 사용합니다. 이를 위해 v-model을 사용합니다.

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

4. 컴포넌트 (Component)

Vue의 컴포넌트는 재사용 가능한 UI 요소입니다. 컴포넌트는 하나의 HTML 파일처럼 동작하며, HTML, CSS, JavaScript를 모두 포함할 수 있습니다. 모든 Vue 애플리케이션은 컴포넌트로 구성되며, 각 컴포넌트는 독립적으로 관리됩니다.

Vue.component('my-component', {
  template: '<p>This is a custom component!</p>'
});

5. 디렉티브 (Directives)

디렉티브는 HTML 요소에 특별한 동작을 부여하는 Vue의 특수 속성입니다. 대표적인 디렉티브로는 v-bind, v-if, v-for, v-on 등이 있습니다.

• v-bind: HTML 속성에 데이터를 바인딩합니다.
• v-if: 조건에 따라 요소를 렌더링합니다.
• v-for: 배열 데이터를 반복 렌더링합니다.
• v-on: 이벤트를 처리합니다.

<div v-if="isVisible">이 요소는 조건에 따라 표시됩니다.</div>

6. 라이프사이클 훅 (Lifecycle Hooks)

Vue 인스턴스는 생성되고, 업데이트되고, 제거될 때마다 특정 단계에서 미리 정의된 라이프사이클 훅을 실행합니다. 개발자는 이러한 라이프사이클 훅을 통해 필요한 로직을 특정 시점에 수행할 수 있습니다. 예를 들어, 컴포넌트가 생성될 때 초기 데이터를 가져오는 등의 작업을 수행할 수 있습니다.

new Vue({
  created() {
    console.log('Vue 인스턴스가 생성되었습니다!');
  }
});

7. Vue 파일 구조 (Single File Components)

Vue에서 컴포넌트는 보통 단일 파일 컴포넌트(Single File Component) 형식으로 작성됩니다. 확장자는 .vue이며, 각 파일은 크게 3부분으로 나뉩니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Vue!'
    };
  }
};
</script>

<style>
div {
  color: blue;
}
</style>

• <template>: HTML 템플릿을 정의하는 부분
• <script>: 컴포넌트의 로직과 데이터를 관리하는 부분
• <style>: 컴포넌트의 스타일을 정의하는 부분

결론

Vue.js의 기본 구조는 Vue 인스턴스, 템플릿, 데이터 바인딩, 컴포넌트, 디렉티브, 그리고 라이프사이클 훅으로 구성됩니다. 이러한 구조는 Vue 애플리케이션이 동적이고 재사용 가능한 UI를 쉽고 효율적으로 구축할 수 있도록 돕습니다.