Vue.js?
1. Vue.js 개요
사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크, 표준 HTML, CSS, JavaScript 기반으로 구축, 사용자 인터페이스를 효율적으로 제공하는 컴포넌트 기반 프로그래밍 모델을 제공함
2. Vue.js 예제
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')
<div id="app">
<button @click="count++">
숫자 세기: {{ count }}
</button>
</div>
- 선언적 렌더링(Declarative Rendering) : Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다.
- 반응성(Reactivity) : Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.
3. Vue 기능
가. Progressive Framework
- 빌드 과정 없이 정적 HTML에 적용
- 모든 페이지에 웹 컴포넌트로 추가
- 싱글 페이지 애플리케이션 (SPA: Single-Page Application)
- Fullstack / 서버 사이드 렌더링 (SSR: Server-Side-Rendering)
- Jamstack / 정적 사이트 생성 (SSG: Static-Site-Generation)
- 데스크톱, 모바일, WebGL 또는 터미널을 대상으로 하는 경우
나. Single-File Component, SFC
Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component: SFC,)를 사용한다.
Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화함.
// 스크립트 영역
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
//템플릿 영역 html작성부
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
//스타일 영역
<style scoped>
button {
font-weight: bold;
}
</style>
다. API 스타일
Vue 컴포넌트는 옵션(Options) API, 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있음.
- Options 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>
- Composition API
Composition API의 경우 import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의함, SFC(Single-File Component)에서 Composition API는 <script setup>과 함께 사용됨 setup 속성은 더 적은 코드 문맥으로 Composition API를 사용할 수 있다. 예를 들어 <script setup>에 import 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있다.
위 예제와 완전 동일 예제지만 Composition 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>
라. 그래서 뭘 써야 할까?
OPTIONS API는 OOP언어 배경을 가진 사용자를 위한 클래스 기반 모델과 컴포넌트 인스턴스(this)의 개념을 중심으로 함.
Composition API는 함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둠. 보다 자유로운 형식, 재사용하기 위한 보다 강력한 패턴을 가능하게 함.
Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같이 설명함.
- 학습용은 OPTIONS API
- 제품용(production)으로 사용하는 경우:
- 빌드 도구를 사용하지 않거나 Vue를 주로 복잡성이 낮은 시나리오에서 사용할 계획이라면 옵션 API를 사용
- Vue로 규모가 있는 앱의 전체를 구축하려는 경우 컴포지션 API + 단일파일 컴포넌트(SFC)를 사용
4. Vue LifeCycle
각 Vue 컴포넌트 인스턴스는 React와 같이 일련의 초기화 과정을 거침
예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다.
가. 사용 방법
예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>
가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted 등이 있음
- 잘못된 사례
onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결함. 이를 위해서는 컴포넌트 설정 중에 이러한 훅은 동기적으로 등록해야 한다.
setTimeout(() => {
onMounted(() => {
// 작동하지 않습니다.
})
}, 100)
- 출처
https://ko.vuejs.org/guide/introduction.html
소개 | Vue.js
ko.vuejs.org
댓글