Vue 배우기 (1)

Vue는 선언적 렌더링(declarative rendering)에 중점을 두고 있는 프론트엔드 프레임워크다. Vue 앱을 굴러가게 만드는 기본적인 building block에 대해 알아보자.

 

SFC 파일

Vue는 리액트와는 전혀 다른 고유 문법을 사용한다. Vue 컴포넌트는 Single-File Component(SFC)라고 하는 하나의 단독적인 파일로 이루어진다. 확장자 .vue를 붙여 저장하는 SFC 파일에는 자바스크립트, HTML 태그, CSS 스타일이 다같이 들어가 아래와 같은 구조를 이룬다.

<script setup>
// 자바스크립트 코드를 작성
import { ref } from "vue"
const username = ref("jbilee")
</script>

<template>
  <!-- 결과물에 대한 HTML 코드를 작성 -->
  <div class="header">{{ username }}</div>
</template>

<style>
/* CSS 관련 코드를 작성 */
.header {
  color: blue;
}
</style>

 

상태 저장

Vue 컴포넌트의 상태는 reactive()나 ref()로 저장할 수 있다. reactive()는 객체만 저장할 수 있는 반면, ref()는 제한 없이 모든 데이터 타입을 상태값으로 저장할 수 있다.

import { reactive, ref } from "vue"

// reactive: 객체만 담을 수 있는 상태값
const counter = reactive({
  count: 0
})

// ref: 모든 데이터를 담을 수 있는 상태값
const message = ref("hello, world")
const age = ref(30)
const counter = ref({
  count: 0
})

 

 

reactive()로 생성한 상태값은 일반 객체처럼 쓰면 된다.

const counter = reactive({
  count: 0
})

counter.count = 1 // { count: 1 }

 

 

하지만 ref로 생성한 상태값을 변경하려면 .value prop을 통해 접근해야 한다.

const counter = ref({
  count: 0
})

counter.value.count = 1 // { count: 1 }

 

디렉티브

디렉티브는 HTML 태그의 속성에 상태값을 전달할 수 있게 해주는 Vue만의 문법이다. 디렉티브는 v-로 시작하는 고유 키워드를 갖고 있고, v-bind, v-on, v-html 등 여러 종류가 있다.

 

v-bind는 속성에 변수를 전달할 때 사용한다. 디렉티브는 워낙 자주 쓰여서 매번 v-까지 타이핑할 필요가 없도록 단축 문법도 같이 제공된다. v-bind의 단축 문법은 콜론(:)이다.

<!-- HTML 문법 -->
<div id="myId"></div>

<!-- Vue 문법 -->
<div v-bind:id="myId"></div>
<div :id="myId"></div>

 

 

v-on은 onClick, onChange 같은 이벤트 listener에 핸들러 함수를 전달할 때 사용한다. 단축 문법으로 @를 쓴다.

<button v-on:click="increment">{{ count }}</button>
<button @click="increment">{{ count }}</button>

 

 

v-model은 v-bind와 v-on을 합친 개념의 디렉티브다. v-model은 상태 prop과 이벤트 핸들러를 같이 쓸 필요가 없도록 해준다. 상태를 저장하는 변수명만 v-model prop으로 전달해주면 된다.

<script setup>
import { ref } from "vue"
const text = ref("")
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>