#3. Vue 3 기본 문법

개발 도구 (Development Tools)/Vue

#3. Vue 3 기본 문법

BiCute 2023. 5. 29. 08:00

# Template 문법

Vue.js에서는 HTML과 유사한 형태의 템플릿 문법을 사용하여 UI를 작성합니다. 템플릿 문법은 Vue.js의 핵심 요소 중 하나이며, 다음과 같은 기능을 제공합니다.

보간(Interpolation): 중괄호({{}})를 사용하여 데이터 값을 표시할 수 있습니다. 이를 통해 Vue.js는 데이터와 UI를 자동으로 동기화할 수 있습니다.
디렉티브(Directive): v- 접두사를 사용하여 Vue.js의 특수한 기능을 사용할 수 있습니다. 예를 들어, v-if 디렉티브를 사용하여 조건부 렌더링을 할 수 있습니다.
이벤트(Event): v-on 접두사를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 예를 들어, v-on:click 디렉티브를 사용하여 클릭 이벤트를 처리할 수 있습니다.
속성(Attribute): v-bind 접두사를 사용하여 HTML 속성을 동적으로 바인딩할 수 있습니다. 예를 들어, v-bind:href 디렉티브를 사용하여 링크의 href 속성을 동적으로 변경할 수 있습니다.
반복(Loop): v-for 접두사를 사용하여 배열의 요소를 반복하여 UI를 생성할 수 있습니다.

아래는 Vue.js의 템플릿 문법을 사용한 간단한 예시입니다.

<div id="app">
  <h1>{{ message }}</h1>
  <button v-on:click="count++">Click me</button>
  <p v-if="count > 0">You clicked {{ count }} times.</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

위 예제에서는 보간, 이벤트, 조건부 렌더링, 반복 등의 기능을 사용하고 있습니다.

Vue.js에서는 템플릿 문법을 사용하여 UI를 작성하고, 데이터와 UI를 자동으로 동기화할 수 있습니다.

# 디렉티브(Directive)

Vue.js에서 디렉티브(Directive)는 v- 접두사를 가지는 특별한 속성으로, Vue.js의 기능을 활용하여 HTML 요소를 제어하고 데이터를 렌더링하는데 사용됩니다.

디렉티브는 Vue.js의 핵심 요소 중 하나이며, 다양한 기능을 제공합니다. 대표적인 디렉티브는 다음과 같습니다.

v-if: 조건부 렌더링을 수행하는 디렉티브로, 지정한 조건에 따라 해당 요소를 표시하거나 숨깁니다.
※ 참고: 조건식 v-if, v-show
v-for: 반복문을 수행하는 디렉티브로, 지정한 데이터 소스를 반복하여 요소를 생성합니다.
※ 참고: 반복문(v-for) 사용하는 방법
v-bind: 데이터를 HTML 속성에 바인딩하는 디렉티브로, 동적으로 속성 값을 변경할 수 있습니다.
v-model: 양방향 데이터 바인딩을 수행하는 디렉티브로, 입력 요소와 데이터를 자동으로 동기화합니다.
※ 참고: 데이터 바인딩하는 방법
v-on: 이벤트 핸들러를 등록하는 디렉티브로, 지정한 이벤트가 발생하면 해당 함수를 실행합니다.
※ 참고: 이밴트 핸들링(v-on)

아래는 Vue.js에서 디렉티브를 사용한 간단한 예시입니다.

<div id="app">
  <p v-if="isDisplayed">Hello, Vue.js!</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-bind:value="message" v-on:input="updateMessage">
  <p>{{ message }}</p>
</div>

위 예제에서는 v-if, v-for, v-bind, v-on 디렉티브를 사용하고 있습니다.

v-if 디렉티브는 isDisplayed 값에 따라 p 요소를 표시하거나 숨깁니다.

v-for 디렉티브는 items 배열의 요소를 반복하여 li 요소를 생성합니다.

v-bind 디렉티브는 message 값을 input 요소의 value 속성에 동적으로 바인딩합니다.

v-on 디렉티브는 input 이벤트가 발생하면 updateMessage 메소드를 실행합니다.

이를 통해 양방향 데이터 바인딩이 수행되며, input 요소와 message 데이터가 자동으로 동기화됩니다.

# 컴포넌트(Component)

Vue.js에서 컴포넌트(Component)는 재사용 가능한 UI 모듈로, HTML, CSS, JavaScript를 포함하는 독립적인 기능 단위입니다. 컴포넌트는 애플리케이션을 더 작고 유지보수 가능한 조각으로 분해하여 코드 재사용성을 높이는데 사용됩니다. Vue.js는 컴포넌트 기반 아키텍처를 기본으로 하며, 다음과 같은 특징을 가집니다.

각각의 컴포넌트는 독립적인 스코프를 가지므로, 이름 충돌을 방지할 수 있습니다.
컴포넌트는 데이터, 이벤트, 라이프사이클 훅 등을 가지며, 이를 통해 컴포넌트 간의 통신과 상호작용을 수행할 수 있습니다.
Vue.js는 전역 컴포넌트 레지스트리를 제공하므로, 애플리케이션 전체에서 사용 가능한 컴포넌트를 등록할 수 있습니다.
Vue.js는 지역 컴포넌트를 통해 필요한 컴포넌트만 로드하여 불필요한 리소스 낭비를 최소화할 수 있습니다.

아래는 Vue.js에서 컴포넌트를 사용한 간단한 예시입니다.

<!-- MyComponent.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <button v-on:click="updateContent">Update Content</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "My Component",
      content: "This is my component"
    };
  },
  methods: {
    updateContent() {
      this.content = "Content updated!";
    }
  }
};
</script>

위 예제에서는 MyComponent.vue 파일에 컴포넌트를 정의하고 있습니다. 컴포넌트는 <template> 요소 내에서 UI를 정의하고, <script> 요소 내에서 데이터와 메소드를 정의합니다. 컴포넌트는 export default로 내보내며, 다른 파일에서 이 컴포넌트를 임포트하여 사용할 수 있습니다.

Vue.js에서는 다음과 같이 컴포넌트를 등록하고 사용할 수 있습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>Welcome to my app!</h1>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    "my-component": MyComponent
  }
};
</script>

위 예제에서는 App.vue 파일에서 MyComponent를 임포트하여 등록하고 있습니다.

등록된 컴포넌트는 <my-component> 태그를 사용하여 App.vue에서 사용할 수 있습니다. 이를 통해 애플리케이션에서 재사용 가능한 UI 모듈을 만들 수 있습니다.

컴포넌트는 다른 컴포넌트 내부에 중첩하여 사용할 수도 있습니다. 이를 통해 컴포넌트의 재사용성을 높이고, 복잡한 UI를 구성할 수 있습니다. 컴포넌트 간의 통신은 데이터와 이벤트를 사용하여 수행됩니다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 이벤트는 자식 컴포넌트에서 부모 컴포넌트로 전달됩니다. 이를 통해 부모-자식 관계의 컴포넌트 간의 상호작용을 구현할 수 있습니다.

Vue.js는 컴포넌트 기반 아키텍처를 기본으로 하며, 이를 통해 코드의 재사용성과 유지보수성을 높이는데 큰 도움이 됩니다. Vue.js에서는 전역 또는 지역 컴포넌트를 등록하여 필요한 컴포넌트만 로드하여 불필요한 리소스 낭비를 최소화할 수 있습니다. 이를 통해 더 효율적인 애플리케이션을 개발할 수 있습니다.

※ 참고:

새로운 컴포넌트를 생성하고 추가하는 방법

컴포넌트 단위로 스타일 적용하기

# 라우터(Router)

Vue.js에서 라우터(Router)는 SPA(Single Page Application)에서 URL 경로를 사용하여 페이지를 변경하거나 컴포넌트를 로드하는데 사용됩니다. Vue.js는 vue-router 라이브러리를 통해 라우팅 기능을 제공하며, 라우터는 Vue.js의 핵심 요소 중 하나입니다. Vue.js에서 라우터를 사용하면 URL 경로에 따라 다른 컴포넌트를 로드하고 애플리케이션의 네비게이션을 제어할 수 있습니다.

라우터는 Vue.js의 컴포넌트 기반 아키텍처와 잘 결합되어 있으며, 컴포넌트를 라우팅에 사용할 수 있습니다. Vue.js에서 라우팅은 다음과 같은 구성요소로 구성됩니다.

라우터: URL 경로와 컴포넌트 간의 매핑을 관리하는 Vue.js의 핵심 요소입니다.
라우트: URL 경로와 로드할 컴포넌트를 지정하는 구성요소입니다.
컴포넌트: URL 경로에 따라 로드할 Vue.js 컴포넌트입니다.

아래는 Vue.js에서 라우터를 사용한 간단한 예시입니다.

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

위 예제에서는 Vue.js에서 라우터를 정의하고 있습니다. createRouter 함수를 사용하여 라우터를 생성하고, history 객체를 사용하여 브라우저의 히스토리를 관리합니다. routes 배열에는 URL 경로와 로드할 컴포넌트를 지정하여 매핑합니다. 각 라우트는 path, name, component 속성을 가지며, 각각 URL 경로, 이름, 로드할 컴포넌트를 지정합니다.

Vue.js에서는 다음과 같이 라우터를 등록하고 사용할 수 있습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>Welcome to my app!</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

createApp(App).use(router).mount("#app");
</script>

위 예제에서는 App.vue에서 라우터를 사용하고 있습니다. <router-link> 태그를 사용하여 URL 경로를 지정하고, router-view 태그를 사용하여 현재 URL 경로에 맞는 컴포넌트를 렌더링합니다. 이를 통해 애플리케이션에서 라우팅을 구현할 수 있습니다.

Vue.js에서 라우팅을 구현할 때, 라우터에서 지원하는 여러가지 기능을 사용할 수 있습니다. 예를 들어, 동적 URL 매칭, 중첩 라우팅, 프로그래밍 방식 라우팅 등이 가능합니다. 또한, Vue.js에서는 라우터 외에도 상태 관리를 위한 Vuex 라이브러리를 제공합니다. Vuex를 사용하면 컴포넌트 간의 데이터 공유와 상태 관리를 보다 효율적으로 수행할 수 있습니다.

Vue.js에서는 vue-router 라이브러리를 사용하여 라우팅을 구현할 수 있습니다. vue-router는 Vue.js에서 많이 사용되는 라이브러리로, 간단하게 설정할 수 있으며 많은 기능을 제공합니다. 이를 통해 Vue.js에서 라우팅을 구현할 수 있습니다.

※ 참고: 페이지 전환하기 (라우터 설치부터 사용까지)

# 상태 관리(State Management)

Vue.js에서 상태 관리(State Management)는 애플리케이션 전체에서 사용되는 데이터를 관리하는 방법입니다.

상태 관리는 애플리케이션의 규모가 커지고 복잡해질수록 필요한 기능입니다.

Vue의 상태 관리는 Vuex를 사용했었으나, 현재는 공식적으로 Pinia를 사용하라고 권고하고 있습니다.

Pinia는 Vue.js 상태 관리 라이브러리 중 하나입니다.

Vuex와 마찬가지로 상태 관리를 위한 솔루션으로, 컴포넌트 간에 데이터를 공유하고 업데이트하는 데 사용됩니다.

Vuex와 비슷한 기능을 가지고 있지만, 사용하기 더 간단하고 직관적인 API를 제공한다는 점에서 차이가 있습니다.

Pinia는 Vue 3의 Composition API를 기반으로 작성되었으며, 상태 저장소를 쉽게 만들고 액세스 할 수 있는 기능을 제공합니다.

Vuex와는 달리 모듈화된 구성요소를 사용하지 않으며, 훨씬 더 직관적이고 단순한 방식으로 상태를 관리할 수 있습니다.

Pinia는 다음과 같은 주요 개념으로 구성됩니다.

Store: 상태를 저장하고 관리하는 곳입니다.
State: 상태 값입니다.
Getter: 상태 값을 계산하는 메서드입니다.
Action: 상태를 변경하는 메서드입니다.

다음은 Pinia를 사용하는 간단한 예제 코드입니다.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

이 예제 코드에서는 useCounterStore라는 이름의 저장소를 정의하고 있습니다.

이 저장소에는 count라는 상태 값과 doubleCount라는 게터, 그리고 increment라는 액션 메서드가 포함되어 있습니다.

이제 이 저장소를 사용하려면 컴포넌트에서 다음과 같이 가져와 사용하면 됩니다.

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from './store'

export default {
  setup() {
    const counter = useCounterStore()

    return {
      counter,
    }
  },
}
</script>

이렇게 컴포넌트에서 useCounterStore()를 호출하면 store 객체를 반환합니다.

이 store 객체를 통해 count나 doubleCount 등의 상태 값을 읽어오거나 increment 등의 액션 메서드를 호출할 수 있습니다.

이것이 Pinia의 기본적인 사용 방법입니다.

※ 참고: Pinia (Vue 상태관리 라이브러리)

현재글#3. Vue 3 기본 문법

[bicute.net] 취미생활과 웹 언어 그리고 다양한 흔적을 기록합니다.

PowerMode, 스킨편집, BiCute SKIN, BiCute, vscode, JQuery, innerContent, github, Javascript, Lifecycle Methods, OpenAPI, CSS, keyboardhint, Windows, 모바일 친화성, Vue 입문, react, useEffect, Ionic Framework, HTML,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Atelier BiCute