[ Vue.js 3 공식 문서 ] 1. Getting Started

 

[ Reference ] 

https://vuejs.org/guide/introduction.html

Introduction | Vue.js

 

[ 1-1 ] Introduction

 

Vue 란 무엇인가?

  Vue 는 유저 인터페이스 기반의 자바스크립트 프레임 워크다. 컴포넌트 기반의 선언적 프로그래밍 모델이며 이런 특징은 유저 인터페이스를 효과적으로 개발할 수 있도록 도와준다.

 

  Vue 의 가장 큰 특징 두 가지는 다음과 같다

1. 선언적 렌더링
   Vue 는 template 문법을 이용해서 HTML 로 확장한다. 이 말은 자바스크립트를 이용해서 HTML 을 선언적으로 그려나갈 수 있다는 걸 의미한다. React 랑 비교를 하자면 React 의 경우에는 JSX 문법을 이용해서 HTML 을 만들어 나가고, Vue 는 선언적 렌더링을 통해서 HTML 을 그려나간다고 생각하면 된다. 
   
   
2. 반응성
   Vue는 자바스크립트에서 상태의 변화를 자동으로 추적한다. 만약 변화를 감지한다면 DOM Tree 를 업데이트한다. 추가적인 설명을 더 붙이면 이 반응성이 SPA 를 구현하는 핵심 기능이며, React, Vue 와 같이 모던 프레임워크(React 는 엄밀히 프레임워크는 아니지만)에서는 이 반응성이라는 특징을 갖고 있다.

 

Single-File Components

  Vue 프로젝트에서 Vue 컴포넌트는 Single-File Component(간략하게 SFC 라고도 부르며 *.vue 파일을 의미한다) 라고 불리는 포맷을 도입해 HTML 과 유사한 방식으로 코드를 작성한다.  컴포넌트의 로직은 JavaScript로, HTML 은 template 으로, CSS 는 style 이라는 파일로 묶어서 제공한다. 

 

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

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

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

 

API Styles (Options VS Composition)

  Vue 컴포넌트는 Options API 와 Composition API 로 두 가지 작성 방법이 존재한다. 

 

Options API

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

  methods: {
    increment() {
      this.count++
    }
  },

  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>

 

  Options API 는 data, methods, mounted 와 같은 옵션들을 이용해서 작성하는 방법이다. Vue 2 버전을 사용해본 사람이라면 이 방식이 본인에게 더 맞을 수 있다. 속성(properties)들은 옵션들에 의해서 정의되고, this 키워드를 이용해서 각각의 속성들을 사용할 수 있다. 대부분의 인터넷 강의에서는 Options API 들을 사용하고 있는데 그 이유는 익숙하기 때문일 것이다. 밑에 나오는 Composition API 는 Vue 3 버전(정식 버전으로 개편되기 이전에도) 때 나오기 시작한 문법인데 대부분의 유명한 강의들은 Vue 2 를 사용하고 있고, Vue 3 을 사용한다 하더라도 이전 버전에서 사용해오던 것이 익숙하기 때문에 Options API 로 강의를 하는 경우가 많다. 

 

Composition API

 

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

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 

  Composition API 를 사용하려면 <script> 태그에 setup 을 추가해서 Options 에서 Composition 으로 변경해야 한다. 위의 예시는 Options API 와 동일한 동작을 구현하도록 만든 코드지만 코드 작성에서 확연한 차이가 존재한다. 또, 기존에 정식 버전으로 채택되기 이전의 Vue 3 에서는 script 태그 안에서 return 을 해준 값들만  template 구문 안에서 작성할 수 있었는데, 지금 개편된  버전에서는 그렇게 return 을 하지 않아도 바로 값을 사용할 수 있도록 설정돼 있다.

 

  위 코드에서 사용된 ref 나 onMounted 는 이후 Vue 공식 문서에서 차차 다룰 내용이지만 간략하게 설명하면 ref 를 이용해서 값을 할당한 변수는 위에서 언급한 "반응성 (Reactivity)" 를 지니는 변수가 돼서 이후 이 변수의 값이 변화되면 Vue 과 변화를 추적해 UI 를 업데이트 할 수 있다. onMounted 는 Options API 의 mounted 와 동일하다. 이 메소드는 Vue 의 라이프 사이클과 연관돼 있는데 컴포넌트가 마운트(mount) 되는 시기, 즉 렌더링이 "된" 시점에 바로 작동시킨다는 의미를 지니고 있다. 

 

둘 중 무엇을 써야 할까요?

  Options API 와 Composition API 중 무엇이 더 좋다, 우월하다고 평가할 수는 없다. 다만, 스타일의 차이다. 

 

  Options API 는 OOP (객체 지향) 언어 배경을 가진 사용자들에게 적합하다. 그냥 쉽게 말해서, this 바인딩에 익숙한 사람들에게 많이 선호될 API 라는 얘기다. 그리고 Composition 보다는 조금더 세부 사항을 추상화 할 수 있고, Option 으로 규격화 돼 있어서 초보자들에게는 그 option 이 가이드라인이 될 수 있다 보니까 초보자 친화적이다. 리액트를 사용한 사람들에게 얘기해주자면 클래스형 컴포넌트를 사용하는 것과 유사하다.

 

  Composition API 는 함수에서 직접 반응 상태 변수를 선언하고 여러 함수의 상태를 함게 구성해 복잡성을 처리하는데 중점을 둔다. Options 보다는 자유롭고 간단하게 함수형으로 코드를 작성할 수 있지만, Vue 내부에서 라이프 사이클이 어떻게 돌고 있고 반응성이 어떻게 동작하는지 기본적인 이해가 있어야 한다. 그러나 그만큼 로직의 패턴을 정의하고 재사용하는데 매우 유용하고 유연하다. 리액트로 비유를 들자면 함수형 컴포넌트를 사용하는 것과 유사하다. 리액트로 따지자면 함수형 컴포넌트와 유사하다.

 

  공식문서에서는 Production 용으로 빌드 도구를 사용하지 않거나 복잡성이 낮다면 Options API 를, Vue로 전체 애플리케이션을 구축하려면 Composition API 를 사용할 것을 권장하고 있다. 그러나 둘 중 반드시 뭐 하나만 써야 한다는 강제성은 없고 상황에 맞춰서 다른 API 를 사용하면 된다.

 

  * 첨언 : 처음부터 리액트를, 그것도 함수형 컴포넌트를 기반으로 리액트를 배운 사람이라면 Composition API 가 더 배우기 편할 것 같다. 개인적으로는 Composition 을 Options 보다 더 편하게 사용하고 있다.

 

[ 1-2 ] Quick Start

  이건 그냥 보고 따라하면 될 거 같다. 

 

  단지 조금 보고 충격적이었던 건, 상태를 관리하기 위해서 Vuex 가 아닌 Pinia 를 쓴다는 점. Jest 나 Mocha 와 같은 테스트 라이브러리를 사용하는 게 아니라 Vitest 라는 Vue 에서 자체적으로 개발한 테스트 라이브러리를 사용한다는 점이다. 저 setting 이 어떻게 바뀔지는 모르겠지만, 이전까지 vue 를 사용했던 사람들의 입장에서는 매우 당황할만한 요소들이 곳곳에 존재하는 것 같다. 

 

  ... 공부 열심히 해야겠다