vue3 시작하기
vue3 extensions 추천
composition API란?
Vue 3에서 소개된 Composition API는 Vue 애플리케이션을 구성하는 새로운 방식을 제공합니다. 이 API는 Options API가 가진 구조적 한계를 극복하고, 더 유연하고 조직적인 코드 구성을 가능하게 합니다. 특히 대규모 애플리케이션 또는 복잡한 컴포넌트에서 그 장점이 두드러집니다.
Composition API의 핵심 개념
1. 반응형 상태 생성
ref와 reactive 함수를 사용하여 반응형 데이터를 생성합니다. ref는 기본 타입을 반응형으로 만들 때 사용하고, reactive는 객체 타입을 반응형으로 만들 때 사용합니다.
javascript
import { ref, reactive } from 'vue';
const count = ref(0);
const state = reactive({ name: 'Vue', version: '3' });2. 컴포지션 함수
로직을 재사용 가능한 함수로 분리하여 관리할 수 있습니다. 이를 통해 관련된 기능을 하나의 함수로 묶어 다른 컴포넌트에서도 쉽게 사용할 수 있습니다.
javascript
function useCounter() {
const count = ref(0);
const increase = () => { count.value++ };
return { count, increase };
}3. 생명주기 훅
Options API에서는 created, mounted 등의 생명주기 훅을 직접 컴포넌트 옵션에 정의했지만, Composition API에서는 onMounted, onCreated 등의 함수를 사용하여 생명주기 훅을 설정할 수 있습니다.
javascript
1javascriptCopy code
2import { onMounted } from 'vue';
3
4onMounted(() => {
5 console.log('Component is mounted!');
6});
7
84. 반응형 계산된 속성과 감시자
computed와 watch API를 사용하여 반응형 계산된 속성과 데이터 감시자를 설정할 수 있습니다. 이는 데이터의 변화에 따라 자동으로 업데이트되는 동적인 속성을 생성하거나, 데이터 변화를 감시할 때 유용합니다.
javascript
1javascriptCopy code
2import { ref, computed, watch } from 'vue';
3
4const count = ref(0);
5const doubled = computed(() => count.value * 2);
6
7watch(count, (newValue, oldValue) => {
8 console.log(`count has changed from ${oldValue} to ${newValue}`);
9});
10Composition API의 장점
Vue 3의 Composition API는 Vue 애플리케이션의 설계와 개발 방식에 혁신을 가져왔으며, 개발자들에게 더 나은 코드 조직과 재사용성을 제공합니다.
options API를 사용했을때 카드
composition API
기존 mixin
위의 경우 updateUsername이 어떤 mixin에서 가져오는지 불명확합니다.
이 프로젝트에 친숙하지 않은 경우 각 믹스인 일일이 열고 살펴봐야 했을 것입니다.
vue3에서 지원하는 composable을 사용하면 리액트의 훅처럼 빼서 재사용이 가능합니다.
사용은 위와같이 합니다.
composition api에는 두가지 종류의 동적 데이터가 있다.
vue.3.2 이후 setup의 발전
javascript
<script setup>
</script>이전에는 이렇게 쓰고 return에 다 넣어줘야 했는데 이제 불필요합니다.
하단과 같이 작성 가능
양방향 바인딩
ref대신 reactive를 사용해 동적 객체 만들기
정적 데이터는 그냥 변수로 선언해서 사용하기
ref와 reactive의 차이점
ref에서는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있습니다.반면 reactive에서는 Object, array, Map, Set과 같은 타입에서만 사용할 수 있습니다.ref에서는 .value property를 붙여 접근할 수 있습니다. <templete>에서 변수를 명시할 때에는 붙일 필요가 없습니다.reactive에서는 .value를 붙일 필요가 없이 <templete>에서 사용하는 자바스크립트 문법처럼 사용하시면 됩니다.둘 중 무엇을 사용해야할까?
정답은 없지만 각자 장점을 생각해 적합한 것을 사용하면 되겠습니다.
ref의 장점
reactive의 장점
ref 예제
javascript
1template>
2 <div>
3 <div class="name">{{ name }}</div>
4 <button @click="updateName">Click</button>
5 </div>
6</template>
7
8<script>
9import { ref } from "vue";
10
11export default {
12 setup() {
13 const name = ref("Summer");
14
15 const updateName = () => {
16 name.value = "Yeonsu";
17 };
18 return {
19 name,
20 updateName,
21 };
22 },
23};
24</script>새롭게 정의된 ref
javascript
1<template>
2 <div>
3 <div class="name">{{ name }}</div>
4 <button @click="updateName">Click</button>
5 </div>
6</template>
7
8<script>
9import { reactive } from "vue";
10
11export default {
12 setup() {
13 const name = reactive({
14 id: 1,
15 });
16
17 const updateName = () => {
18 name.id = 2;
19 };
20 return {
21 name,
22 updateName,
23 };
24 },
25};
26</script>reactive 사용하는 방법