회사에서 뷰를 사용하기 때문에.. 기초부터 공부해봄니다

컴포넌트 구조

Vue 싱글 파일 컴포넌트 (Single-File Components)

: 컴포넌트의 템플릿, 로직, 스타일을 하나의 파일로 묶어낸 특수한 파일 형식

• HTML, CSS 및 JavaScript 3개를 하나의 파일에 합친 것
• <template>, <script> 및 <style> 블록을 이용해 하나의 파일에서 컴포넌트의 뷰, 로직 및 스타일을 캡슐화할 수 있게 해준다.
• 파일명이 .vue로 끝난다.

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<script setup>
  import { ref } from 'vue'
  const greeting = ref('Hello World!')
</script>

<style>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>

---

기본 문법

1. Mustache 문법

템플릿(HTML)에서 변수를 사용하고 싶다면 Mustache 문법({{}})을 사용한다.

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

---

2. 속성 바인딩

v-bind 디렉티브

: HTML 요소의 속성을 변수와 연결하여 속성을 동적으로 설정하는 데 사용되는 디렉티브

• Mushtache 문법은 HTML 태그의 속성으로 사용될 수 없기 때문에, 속성에 변수를 바인딩하고 싶다면 v-bind 디렉티브를 사용한다.
• 그리고 변수를 쌍따옴표("")로 감싸주면 된다.

<div id={{dynamicId}}></div>      <!-- ❌ -->
<div v-bind:id="dynamicId"></div> <!-- ⭕️ -->

(React에 익숙한 나에게는 이 문법에 적응하는 게 헷갈렸다..🙂)
디렉티브는 v-로 시작하는 특수 속성으로 나중에 다룰 것이다.

v-bind는 자주 사용되기 때문에 단축 문법이 존재하는데, v-bind를 생략하고 :만 작성해도 된다.

<div :id="dynamicId"></div>

여러 속성을 가지고 있는 JavaScript 객체를 단일 요소에 바인딩할 수도 있다.

<!-- template -->
<div v-bind="objectOfAttrs"></div>

// script
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

---

3. JavaScript 표현식 사용

모든 데이터 바인딩 내에서는 JavaScript 표현식을 사용할 수 있다.

Vue의 템플릿에서 JavaScript 표현식을 사용할 수 있는 위치

1. 이중 중괄호 {{}} 내부
2. 모든 Vue 디렉티브 속성 (v-로 시작하는 특수 속성) 내부

• 각 바인딩에는 하나의 단일 표현식만 사용할 수 있다.
• 표현식은 값으로 평가될 수 있는 코드 조각이다. 쉽게 말해 return 뒤에 사용할 수 있는 코드여야 한다.

{{ number + 1 }}

{{ ok ? '예' : '아니오' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

• 아래의 코드들은 표현식이 아니므로 작동하지 않는다.

<!-- 이것은 표현식이 아니라 선언식입니다: -->
{{ var a = 1 }}

<!-- 흐름 제어도 작동하지 않습니다. 삼항 표현식을 사용하십시오. -->
{{ if (ok) { return message } }}

---

4. 함수 호출

바인딩한 표현식 내부에서 메소드를 호출할 수 있다.

<time :title="toTitleDate(date)" :datetime="date"> <!-- 바인딩한 속성에서 호출 -->
  {{ formatDate(date) }}                           <!-- 이중 중괄호 안에서 호출 -->
</time>

• 바인딩한 표현식 내부에서 호출되는 함수는 컴포넌트가 업데이트될 때마다 호출되기 때문에 데이터를 변경하거나 비동기 작업을 트리거하는 등의 부수 효과(Side Effect)가 없어야 한다.

부수 효과 (Side Effect)

: 함수가 호출될 때 컴포넌트나 애플리케이션의 상태에 영향을 주거나, 비동기 작업을 트리거하거나, 외부 데이터를 변경하는 등의 동작

➡️ 따라서 컴포넌트 상태를 변경하거나 비동기 작업을 시작하는 등의 Side Effect를 일으키는 동작은 해당 컴포넌트의 라이프사이클 훅(e.g. mounted, beforeUpdate 등)이나 Vuex와 같은 상태 관리 도구를 사용해서 관리하는 것이 좋다.

---

디렉티브 (Directves)

: v- 접두사가 있는 특수한 속성으로, Vue는 여러 빌트인 디렉티브를 제공한다. (e.g. v-html, v-bind ...)

Built-in Directives - Vues.js 2

• 디렉티브의 속성값은 단일 JavaScript 표현식이어야 한다.
  (v-for, v-on, v-slot은 예외)
• 디렉티브의 역할은 표현식의 값이 변경될 때 DOM에 반응적으로 업데이트를 적용하는 것이다.
• 예를 들어 v-if는 속성값인 seen의 truthy/falsy 값을 기반으로 DOM에서 엘리먼트를 삽입하거나 제거한다.

<p v-if="seen">이제 이것을 볼 수 있습니다.</p>

---

1. 인자 (Arguments)

일부 디렉티브는 인자를 사용할 수 있으며, 이는 디렉티브 뒤에 콜론(:)으로 표시된다.

예시 1) v-bind

<a v-bind:href="url">이동하기</a>
<a :href="url">이동하기</a> <!-- 단축 문법 -->

위의 예시에서 href는 v-bind 디렉티브의 인자로서, a 요소의 속성인 href에 url의 값을 바인딩한 것이다.

예시 2) v-on:click

<button v-on:click="submitForm"></button>
<button @click="submitForm"></button> <!-- 단축 문법 -->

v-on 디렉티브는 DOM 이벤트를 수신하는 디렉티브로, 수신할 이벤트 이름을 인자로 받는다. v-on은 단축형으로 @을 사용할 수 있다.

---

2. 동적 인자 (Dynamic Arguments)

디렉티브의 인자를 대괄호([])로 감싸서 JavaScript 표현식으로 사용할 수도 있다.

<a v-bind:[attributeName]="url"> ... </a>
<a :[attributeName]="url"> ... </a> <!-- 단축 문법 -->

여기서 attributeName은 동적으로 정해지며, 예를 들어 컴포넌트의 데이터에 attributeName 속성값이 "href"인 경우, 이 바인딩은 v-bind:href와 같다.

마찬가지로 동적인 인자를 사용해서 핸들러에 이벤트 이름을 동적으로 바인딩할 수도 있다.

<button v-on:[eventName]="submitForm"></button>
<button @[eventName]="submitForm"></button> <!-- 단축 문법 -->

여기서 eventName이 "focus"인 경우, 이 바인딩은 v-on:focus와 같다.

동적 인자 값 제약 조건

동적인 인자는 null 또는 문자열로 평가되어야 한다.

• 값이 null일 경우, 바인딩을 명시적으로 제거한다.
• 문자열이 아닌 다른 값은 에러를 발생시킨다.

---

3. 수식어 (Modifiers)

: 점(.)으로 시작하는 특수한 접미사로, 디렉티브가 특별한 방식으로 바인딩되어야 함을 나타낸다.

<form @submit.prevent="onSubmit">...</form>

예를 들어 .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 지시한다.

다음 글에서는 다양한 v- 디렉티브와 각각의 역할에 대해 알아볼 것이다!