230630 TIL [Vue + TS] 프로젝트 시작하기

토이 프로젝트를 하나 하려는데 react+ts로 할까 하다가 vue 공부를 하다만 게 생각나서 vue로 프로젝트를 생성했다!

오랜만에 생성하니까 정말 하나도 기억이 안난다! 🤯 블로그에 적어둔 것도 없어서 이번에는 적어가면서 진행하려고 한다 😀

 

---

vite로 프로젝트를 생성한다.

npm create vite@latest 내 프로젝트 -- --template vue

 

d.ts 파일 생성

import from에 vue 모듈이 없다고 난리를 치면 때문에 황급히 d.ts 파일을 생성한다. 참고

 

컴포넌트 선언 문법

Options API vs Composition API

options API는 기존 vue 2.X 버전 때 사용하던 방법이다. data()가 return 하는 객체 안에 변수를 정의하고, methods에 함수를 정의하여 사용한다. 변수에 접근할 때 this 키워드를 사용한다.

// options API
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Options API',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

 

composition API는 기존 vue 3 버전 때 새롭게 등장한 방법이다. 변수도 함수도 setup()안에 모두 정의하여 사용하고 값과 메서드를 return한다. 반응형 함수 reactive를 사용해 반응형 객체 데이터를 반환한다.

 

// composition API
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      message: 'Composition API',
      count: 0
    });

    const increment = () => {
      data.count++;
    };

    return {
      message: data.message,
      increment
    };
  }
};
</script>

차이점(option API vs Composition API)

- 데이터 옵션을 사용하여 데이터 속성을 정의 vs 반응형 함수 또는 기타 반응형 유틸리티를 사용하여 반응형 데이터 속성을 정의
- 메소드 옵션을 사용하여 메소드를 정의 vs 컴포지션 API에서는 설정 함수 내에서 함수를 정의하고 템플릿에서 사용할 수 있도록 반환
- 데이터 속성이 자동으로 반응형 vs 반응형 데이터를 생성하려면 reactive 또는 ref와 같은 반응형 유틸리티를 명시적으로 사용해야함
- 컴포넌트의 로직을 여러 옵션에 분산시킴 vs 설정 함수에서 관련 코드를 함께 그룹화하여 보다 모듈화되고 컴포저블한 구조를 유도

 

defineComponent

컴포넌트를 정의하는데 이렇게 사용할 수도 있지만 ts 프로젝트를 생성했기 때문에 defineComponent를 사용한다.

<script>
export default {
  // data, methods
}
</script>

defineComponent() 함수는 실제로 TypeScript를 지원하는 컴포넌트 객체를 만드는 데 사용된다. 이 함수는 Vue 프레임워크에서 제공하며 TypeScript를 사용할 때 컴포넌트 객체의 type-safe를 보장하며 컴포넌트 객체에 적절한 타입스크립트 타입 추론과 지원이 있는지 확인할 수 있다. 이는 Vue 컴포넌트로 작업할 때 더 나은 유형 검사 및 IDE 도구 지원을 제공하는 데 도움이 된다. Options API를 사용할 때는 defineComponent()가 필요하지 않다.

<script>
import { defineComponent, reactive } from 'vue';

interface ComponentData {
  message: string;
  count: number;
}

export default defineComponent({
  setup() {
    const data: ComponentData = reactive({
      message: 'Hello, Vue!',
      count: 0
    });

    const increment = () => {
      data.count++;
    };

    return {
      data,
      increment
    };
  }
});
</script>