Vue.js 기초

개요

Vue.js는 컴포넌트 기반 아키텍처를 채택하여 UI를 재사용 가능한 부품으로 만들 수 있습니다. 가상 DOM을 사용하여 효율적인 렌더링을 제공하며, 단일 페이지 애플리케이션(SPA) 개발에 매우 적합합니다. React와 Angular의 장점을 결합했다는 평가를 받습니다.

기본 문법

Vue는 HTML 기반 템플릿 문법을 사용합니다. v- 접두사가 붙은 특수 속성(디렉티브)을 통해 템플릿에 동적인 동작을 부여합니다.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

Vue 인스턴스

모든 Vue 애플리케이션은 새로운 Vue 인스턴스를 생성하는 것으로 시작합니다. Vue 인스턴스는 data, methods, computed 등 다양한 옵션들을 포함합니다.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
}).mount('#app');

주요 디렉티브

디렉티브는 Vue의 특별한 HTML 속성으로, 요소에 특별한 동작을 부여합니다.

사용 예제

입력 필드에 텍스트를 입력하면 실시간으로 메시지가 업데이트되는 예제입니다.

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        message: '안녕하세요, Vue!'
      }
    }
  }).mount('#app');
</script>

주의사항 및 팁

• Vue는 상태(data)가 변경되면 자동으로 화면을 업데이트합니다. 이를 반응형(Reactivity) 시스템이라고 합니다.
• 컴포넌트를 만들 때는 데이터와 로직을 분리하는 것이 좋습니다.
• Vue Router를 사용하여 SPA에서 여러 페이지를 관리할 수 있습니다.