Vue.js에 대해서 알아보기

1. Vue는 무엇일까?

Vue(view와 마찬가지로 /vju:/ 라고 발음)는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다.

표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다.

 

예제 (JS / template)

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    숫자 세기: {{ count }}
  </button>
</div>

위의 예는 Vue의 두가지 핵심 기능을 보여줍니다

• 선언적 렌더링(Declarative Rendering) : Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다.
• 반응성(Reactivity) : Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.

 

2. 프로그레시브 프레임워크

Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루는 프레임워크입니다.

이를 염두하여 Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다.

 

※ Vue의 다양한 사용 방식

• 빌드 과정 없이 정적 HTML에 적용
• 모든 페이지에 웹 컴포넌트로 추가
• 싱글 페이지 어플리케이션 (SPA: Single-Page Application)
• Fullstack / 서버 사이드 렌더링 (SSR: Server-Side-Rendering)
• Jamstack / 정적 사이트 생성 (SSG: Static-Site-Generation)
• 데스크톱, 모바일, WebGL 또는 터미널을 대상으로 하는 경우

 

3. 싱글 파일 컴포넌트

빌드 도구를 사용하는 Vue 프로젝트에서는 HTMl과 유사한 싱글 파일 컴포넌트(Single-File Component : SFC, *.Vue 파일)의 파일 형식을 사용해 Vue 컴포넌트를 작성합니다.

컴포넌트의 논리(JavaScript), 템플릿(HTML), 스타일(CSS)을 하나의 파일에 캡슐화합니다.

 

예제 (위의 예제를 SFC 형식으로 변환)

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">숫자 세기: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

 

4. API 스타일

Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두가지 스타일로 작성 가능합니다.

 

옵션 API

옵션의 data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직을 정의합니다.

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

컴포지션 API

import한 API 함수들을 사용하여 컴포넌트 로직을 정의합니다.

SFC에서는 일반적으로 <script setup>과 함께 사용됩니다.

(setup을 사용함으로 Vue가 적은 코드 문맥으로 컴포지션 API를 사용하고, 컴파일 시 올바르게 동작할 수 있게 코드 변환합니다.)

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

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

자료 출처 (Vue 공식 홈페이지) : https://v3-docs.vuejs-korea.org/guide/introduction.html#api-styles