[TIL] Vue 설치 및 구성

jeongjwon·2023년 10월 26일

TIL vue

이론

목록 보기

7/19

Vue란?

사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크로 표준 HTML, CSS, JS 를 기반으로 구축되고 컴포넌트 기반 프로그래밍 모델을 제공한다.

선언적 렌더링 (Declarative Rendering) : 표준 HTML 을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML 을 선언적으로 작성할 수 있다.
반응성 (Reactivity) : JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM 을 효율적으로 업데이트하는 것을 자동으로 수행한다.

싱글 파일 컴포넌트 SFC (Single-File Component)

컴포넌트의 논리 (JavaScript), 템플릿(HTML), 스타일(CSS)를 하나의 파일에 캡슐화하여 묶어낸 특수한 파일 형식으로, *.vue 파일이라고도 한다.


<script>
export default {
  data() {
    return {
      greeting: '안녕 Vue!'
    }
  }
}
</script>

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

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

SFC 사용을 위해서는 빌드 방식을 따라야 하지만,

위와 같은 이점을 이용한다.

API 스타일

Vue 컴포넌트는 옵션(options) API 와 컴포지션(Composition) API 두가지 스타일로 작성할 수 있다.

옵션 API
data, methods, mounted 와 같은 객체를 사용하여 컴포넌트의 로직을 정의한다. 옵션이 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this 에 노출된다.
OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 잘 맞고 반응형 세부사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행한다.

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

컴포지션 API
import 해서 가져온 API 함수들을 사용해서 컴포넌트의 로직을 정의한다. SFC 에서 일반적으로 <script setup>에 import 되어 가져온 객체들과 선언된 최상위 변수 및 함수를 직접 사용하여 Vue가 더 적은 코드 문맥으로 컴파일 시 의도한 대로 올바르게 동작할 수 있게 코드를 변환하도록 한다.
함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 효과적이고 보다 자유로우며 이런 유연성으로 로직을 구성하고 재사용하기에 강력하다.


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

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>