3. Vue3 기본 문법

Vue3 기본 문법

프로젝트를 진행하다가 Vue3에 대해 아는 것이 너무 없다는 것을 느꼈습니다.
그래서 기본적인 문법은 알아겠다는 생각에 ChatGPT엑 배워 보기로 했습니다.

 

1. Vue가 뭐야? 
2. 프레임워크란?
3. Vue3 기본 문법
4. Vue Router (<router-link>, <router-view>)
5. Pinia (상태 관리 라이브러리)
6. Vue3 Composition API
7. Pinia Store에서 ref와 reactive를 사용하는 방법
8. Pinia에서의 Composition API 스타일과 Options API 스타일

나의 말:

vue3 기본 문법을 익혀보자.

ChatGPT의 말:

좋아! Vue 3의 기본 문법을 하나씩 배워보자. 🚀

1. Vue 3 프로젝트 생성

Vue 3는 Vite와 함께 사용하는 것이 일반적이야.
Vite는 빠르고 가벼운 빌드 도구야.

📌 Vue 3 프로젝트 생성 (Vite 사용)

# 최신 Vue 프로젝트 생성
npm create vite@latest my-vue-app --template vue

# 프로젝트 폴더로 이동
cd my-vue-app

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

🚀 http://localhost:5173에서 실행됨!

2. 기본 문법 익히기

📌 1) Vue 3 기본 구조

📌 App.vue

<script setup>
const message = "Hello, Vue 3!";
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>

✔ script setup → Vue 3에서 Composition API를 간단하게 사용할 수 있음
✔ {{ message }} → 데이터 바인딩 (Mustache 문법)
✔ <style scoped> → 이 컴포넌트에만 적용되는 스타일

📌 2) 반응형 데이터 (ref(), reactive())

반응형 데이터는 데이터가 변경되면 자동으로 UI에 반영되는 기능을 말해.
Vue에서는 이를 위해 ref()와 reactive()를 사용해.
Vue의 핵심 개념 중 하나로,
데이터를 수정할 때 UI가 자동으로 업데이트되도록 만들어줘.
이걸 "reactivity"라고도 불러.

📌 ref()를 사용하면 반응형 데이터를 만들 수 있어.

<script setup>
import { ref } from "vue";

const count = ref(0); // 반응형 변수 (Ref)

const increment = () => {
  count.value++; // ref는 .value로 접근
};
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">+</button>
</template>

✔ ref(0) → 반응형 데이터 생성
✔ count.value → 값에 접근할 때 .value 사용
✔ @click="increment" → 클릭 이벤트 실행

📌 reactive()는 여러 개의 데이터를 객체로 관리할 때 사용해.

<script setup>
import { reactive } from "vue";

const user = reactive({
  name: "John",
  age: 25,
});

const increaseAge = () => {
  user.age++;
};
</script>

<template>
  <p>Name: {{ user.name }}</p>
  <p>Age: {{ user.age }}</p>
  <button @click="increaseAge">나이 증가</button>
</template>

✔ reactive({}) → 여러 개의 데이터를 한 객체로 묶어서 사용 가능
✔ user.age++ → .value 없이 바로 수정 가능

📌 3) computed() (계산된 값)

📌 computed()를 사용하면 자동으로 값이 계산됨.

<script setup>
import { ref, computed } from "vue";

const price = ref(100);
const quantity = ref(2);

const totalPrice = computed(() => price.value * quantity.value);
</script>

<template>
  <p>총 가격: {{ totalPrice }}</p>
</template>

✔ computed() → 값이 변경될 때만 자동으로 다시 계산됨

📌 4) watch() (데이터 변화 감지)

📌 특정 데이터가 변경될 때 실행할 로직을 정의할 수 있어.

<script setup>
import { ref, watch } from "vue";

const message = ref("");

watch(message, (newValue, oldValue) => {
  console.log(`변경됨: ${oldValue} → ${newValue}`);
});
</script>

<template>
  <input v-model="message" placeholder="입력해보세요!" />
</template>

✔ watch(감시할 값, (새 값, 이전 값) => { ... })

📌 5) 이벤트 핸들링 (@click, @input, @keyup)

📌 @ 기호를 사용해 이벤트를 연결할 수 있어.

<script setup>
import { ref } from "vue";

const message = ref("");

const handleInput = (event) => {
  message.value = event.target.value;
};
</script>

<template>
  <input @input="handleInput" placeholder="입력하세요" />
  <p>입력된 값: {{ message }}</p>
</template>

✔ @input → 입력값 변경 감지
✔ handleInput(event) → 입력된 값을 업데이트

📌 6) v-if, v-show (조건부 렌더링)

📌 v-if와 v-show는 조건에 따라 화면을 다르게 보여줄 때 사용해.

<script setup>
import { ref } from "vue";

const isVisible = ref(true);
</script>

<template>
  <button @click="isVisible = !isVisible">토글</button>

  <p v-if="isVisible">이 문장은 v-if로 렌더링됨.</p>
  <p v-show="isVisible">이 문장은 v-show로 렌더링됨.</p>
</template>

✔ v-if="조건" → 조건이 false면 DOM에서 삭제됨
✔ v-show="조건" → 조건이 false면 CSS display: none; 처리됨

📌 7) v-for (리스트 렌더링)

📌 리스트를 렌더링할 때 사용해.

<script setup>
import { ref } from "vue";

const items = ref(["사과", "바나나", "체리"]);
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

✔ v-for="(item, index) in items" → 배열을 순회하면서 렌더링

📌 8) props (부모 → 자식 컴포넌트 데이터 전달)

📌 defineProps()를 사용해 부모에서 전달한 값을 받을 수 있어.

📌 Child.vue

<script setup>
defineProps({
  message: String,
});
</script>

<template>
  <p>자식 컴포넌트: {{ message }}</p>
</template>

📌 App.vue

<template>
  <Child message="안녕하세요!" />
</template>

<script setup>
import Child from "./Child.vue";
</script>

✔ defineProps({ message: String }) → props를 받아서 사용

📌 9) emit (자식 → 부모 이벤트 전달)

📌 defineEmits()를 사용하면 자식 컴포넌트에서 부모에게 이벤트를 보낼 수 있어.

📌 Child.vue

<script setup>
const emit = defineEmits(["customEvent"]);

const sendEvent = () => {
  emit("customEvent", "안녕하세요!");
};
</script>

<template>
  <button @click="sendEvent">이벤트 보내기</button>
</template>

📌 App.vue

<template>
  <Child @customEvent="handleEvent" />
</template>

<script setup>
import Child from "./Child.vue";

const handleEvent = (message) => {
  console.log("받은 메시지:", message);
};
</script>

✔ emit("customEvent", 데이터) → 부모에게 이벤트 전달

📌 다음 단계는?

✅ Vue Router (<router-link>, <router-view>) 배우기
✅ Pinia (상태 관리 라이브러리) 익히기
✅ Vue + Firebase 연동해보기

 

이전: 2. 프레임워크란?

다음: 4. Vue Router (<router-link>, <router-view>)