[vue3] Vue3 소개

Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크임.
표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공함.

Vue의 두가지 핵심 기능

• 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있음.

• 반응성(Reactivity): Vue는 JavaSCript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트 하는 것을 자동으로 수행함.

프로그레시브 프레임워크

Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루는 프레임워크이자 생태계임.
사용사례에 따라 Vue를 다양한 방식으로 사용할 수 있음.

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

싱글 파일 컴포넌트

빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File-Component: SFC, *.vue 파일)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성함.
컴포넌트의 논리(JavaScript), 템플릿(HTML), 및 스타일(CSS)을 하나의 파일에 캡슐화함.

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

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

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

API 스타일

Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있음.

옵션 API

옵션 API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의함.
옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됨.

컴포지션 API

컴포지션 API를 사용하는 경우, import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의함.
SFC에서 컴포지션 API는 일반적으로 <script setup> 과 함께 사용됨.
setup 속성은 Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고, 컴파일 시 의도한대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트.
<script setup> 에 import 되어 가져온 객체들가 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있음.

무엇을 선택?

두 API 스타일 모두 일반적인 사용 사례를 완벽히 다룰 수 있음.
동일한 기본 시스템에 의해 구동되는 서로 다른 인터페이스임.(옵션 API는 컴포지션 API 위에 구현이 됨.)

옵션 API는 this의 개념을 중심으로 반응형 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행하여 초보에게 더 친숙함.

컴포지션 API는 함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함꼐 구성하는데 중점을 둠.
자유로운 형식이며 Vue에서 반응형이 효과적으로 사용되는 방식에 대한 이해가 필요함.
그 대가로 이 유연성은 로직을 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 함.
컴포지션 API | FAQ 두 스타일 비교 및 컴포지션 API의 잠재적 이점

일반적인 권장 사항

• 학습을 목표: 쉽게 이해할 수 있어보이는 스타일로 가면 됨. 대부분의 핵심 개념은 두 스타일 간에 공유됨
• 제품용으로 사용:
  빌드 도구를 사용하지 않거나 vue를 주로 복잡성이 낮은 시나리오에서 사용할 계획이라면 옵션 API를 사용.
  vue로 규모가 있는 앱의 전체를 구축하려는 경우 컴포넌트 API + 단일파일 컴포넌트(SFC)를 사용.
  

출처(v3-docs)