[Vue.js] About vue.js (1)

리액트로 개발을 시작해서 뷰를 접할 기회가 없었다. 사실 뷰를 쓸 일이 있을까..? 라는 생각을 했었던 것 같다. 하지만 이번 프로젝트에서 뷰를 사용하게 되었다! 그래서 뷰에 대해 정리해보려한다

앱 생성

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
                                

• 모든 vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성한다.
• createApp에 전달하는 객체는 최상위 컴포넌트다.
• 앱 인스턴스는 .mount() 메서드가 호출될 때까지 아무것도 렌더링 하지 않는다.

✭ 인스턴스란? 뷰의 시작이 되는것으로 vue앱을 만들 때 필수로 생성해야하는 코드. 인스턴스 안에는 미리 정의되어 있는 속성과 메소드들이 있기 때문에 이 기능들을 이용하여 효과적인 화면 구현이 가능.

정리해보면, npm run serve 명령어로 뷰를 실행시키는 순간 main.js 파일이 실행되는데, main.js 파일은 vue를 기반으로 createApp 함수를 실행합니다. 그리고 이때 가장 먼저 가지고 오는 것이 통합 컴포넌트인 App.vue파일이다.
이렇게 만들어진 인스턴스를 index.html의 id="app"에다가 mount 하게 되는 것.

템플릿 문법

✔️ 텍스트 보간법

<span> 메세지: {{ msg }} </span>
<span v-once> 메세지: {{ msg }} </span>

• 데이터 바인딩의 가장 기본적인 형태는 이중 중괄호 문법을 사용한 텍스트 보간법이다.
• 이중 중괄호 내 msg는 해당 컴포넌트 인스턴스의 msg 속성 값이다. msg 속성이 변경될 때마다 업데이트 된다.
• 데이터가 변경되어도 갱신되지 않길 바란다면, v-once 사용

✔️ 원시 HTML

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>
    
//텍스트 보간법 사용: <span style="color: red">이것은 빨간색이어야 합니다.</span>
//v-html 디렉티브 사용: 이것은 빨간색이어야 합니다.

• 텍스트 보간법은 일반 텍스트로 바인딩 되므로, Html을 출력하기 위해서는 v-html을 사용해야한다.
  ❗️신뢰할 수 있는 컨텐츠에만 v-html 사용하기!

✔️ 속성

  <div v-bind:id="dynamicId"></div>
  <button v-bind:disabled="isButtonDisabled">Button</button>

• 속성을 부여할 때는 이중 중괄호를 사용할 수 없다. v-bind를 사용해야한다.
• v-bind:[속성명] -> :[속성명] 으로 축약 가능

✔️ 자바스크립트 표현식

• 텍스트 보간법에 자바스크립트 표현식이 들어갈 수 있다.

<div>{{ count + 1 }}</div>
<div>{{ result ? 'SUCCESS' : 'FAIL' }}</div>

✔️ 지시어

• -로 시작하는 특별한 속성으로 Vue의 기능을 활용할 수 있도록 도와준다. Vue에서 미리 정의된 지시어들이 존재한다.

v-bind 데이터를 바인딩하는 지시어
v-html HTML 코드를 렌더링하는 지시어
v-for 반복 렌더링을 수행하는 지시어
v-if / v-else / v-else-if 조건부 렌더링을 수행하는 지시어
v-on 이벤트 처리를 수행하는 지시어
v-model 양방향 데이터 바인딩을 수행하는 지시어
v-slot 자식컴포넌트에게 데이터나 로직을 전달할때 사용하는 지시어
v-pre 해당 엘리먼트의 텍스트 내용을 파싱하지 않도록 하는 지시어
v-once 해당 엘리먼트를 한번만 렌더링 하도록 하는 지시어
v-text 엘리먼트의 텍스트 콘텐츠를 렌더링하는 지시어. 위에서 설명한 텍스트 보간법과 동일한 결과이다.
v-cloak 인스턴스가 로드되기 전에 발생하는 깜빡임을 방지하는 지시어

✔️ 전달 인자(Arguments)

• v-bind나 v-on 같은 지시어는 전달인자를 가질 수 있다.

<div v-bind:name="userName"></div>
<div v-on:click="login"></div>

✔️ 동적전달 인자(Dynamic Arguments)

<div v-bind:[attrName]="attrValue"></div>
<div v-on:[eventName]="eventAction"></div>

• 인스턴스의 attrName와 attrValue 속성을 이용하여, 동적으로 v-bind의 속성과 값을 바인딩 시킬 수 있다. 인스턴스의 eventName, enventAction 속성을 이용하여, 동적으로 v-on 이벤트 속성과 처리기를 바인딩 시킬 수 있다.

반응형 상태 사용법 (Options API)

<script>
export default {
  // data: 반응형 상태를 정의
  data () {
    return  {
      count: 0
    }
  },
  
  // methods 선언
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>
<template>
  <button @click="increment">{{ count }}</button>
</template>

• data() 함수는 하나의 객체를 반환하고, 그 객체의 데이터들은 모두 vue 반응형 시스템에 의해 변경이 감지되어, 컴포넌트 인스턴스의 $data에 저장된 후 화면에 반영된다.
• methods 옵션을 사용하여, 컴포넌트에 필요한 메소드를 추가하여 사용 가능
• 메소드 내부에서 사용할 데이터는 this.{data명}을 활용하면 된다.

❗️ data () 함수에서는 항상 return {} 처럼 객체를 반환하는 함수가 되도록 선언하자. 그렇지 않으면 반응형이 동작하지 않는다.

반응형 상태 사용법(Composition API)

✔️ ref

<script setup>
import { ref } from 'vue'

// 반응형 상태 정의
const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

• ref 함수가 바로 반응형 상태를 만들어 주는 역할을 한다. ref 함수를 호출하면 .value 속성을 가지는 객체를 리턴한다. 이 객체가 바로 반응형 상태가 자동으로 동작하게 해주는 역할을 해주는 객체이다.
• ref 함수의 인자로는 모든 타입이 올 수 있다.

✔️ reactive

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

// 반응형 상태 정의
const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>
<template>
  <div>Counter Page</div>
  <button @click="increment">{{ state.count }}</button>
</template>

• ref와 사용법은 똑같지만 차이점은 reactive 함수의 인자로는 기본타입(string, number, boolean)이 올 수 없고, object 타입이 와야 한다.

computed & watch

<div id="demo">{{ fullName }}</div>
const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}).mount('#demo')

• computed는 firstName과 lastName이 변경이 될 때를 감지하여 이미 계산되어 있는 결과를 보여준다.
• 종속 대상의 값이 변경되지 않는다면 컴포넌트가 리렌더링 되도 다시 실행되지 않는다.

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')

• watch는 firstName과 lastName을 감시하며, 변경될 때 fullName을 변경해준다.
• 지정한 대상의 값이 변경될 때마다 정의한 함수가 실행된다. 즉, 어떤 조건이 되었을 때 함수를 실행시키기 위한 트리거로서 사용할 수 있다는 의미.