Vue.js

SFC

Single File Component: HTML, JS, Css를 하나의 파일에 캡슐화 시키는 방식이며 Vue를 빌드 방식으로 사용 시 컴포넌트를 만드는데 권장된다.

API Style

Vue Component는 Options API 와 Composition API 두가지 스타일로 작성한다.

Options API

옵션의 data, methods, mounted같은 객체를 사용해 컴포넌트 로직을 정의한다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 를 가르키는 함수 안의 this에 노출

<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함수를 사용해 컴포넌트 로직을 정의하며, 일반적으로 script setup과 함께 사용. setup속성은 Vue가 더 적은 코드로 컴포지션 API를 사용하고 올바르게 동작 가능하게하는 힌트이다. script setup에 import로 가져온 객체와 선언된 최상위 변수, 함수는 템플릿에서 직접 사용할 수 있다.

<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>

옵션 vs 컴포지션

옵션은 컴포지션 위에 구현된다. 기본 지식은 두개 다 상관없이 돌일하다.

옵션 API는 일반적으로 OOP언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는 this를 중심으로 하며, 반응형 세부사항을 추상화하고 옵션그룹을 통해 코드 구조를 실해해서 초보자에게 친숙하다

컴포지션은 함수 범위에서 직접 반응형 변수를 선언, 복잡성 처리를 위한 여러 함수의 상태를 함께 구성하는데 중점을 두며, 자유로운 형식으로 로직을 구성하고 재사용하기 위한 강력한 패턴을 가능하게 한다.

일반적인 권장 사항

빌드도구를 사용하지 않거나 Vue를 주로 간단한 시나리오에서는 option, 규모가 있는 앱의 전체 구축은 컴포넌트 API + 단일파일 컴포넌트(SFC)를 사용하자