Vue 공부하기(1)

박경빈·2023년 11월 21일

Vue

웹 페이지 화면을 개발하기 위한 점진적인 프레임워크
가상 DOM으로 화면 요소를 변경 또는 조작하고 최종 결과물을 DOM Tree에 반영한다.
핵심 기능으로는 선언적 렌더링(Declarative Rendering)과 반응성(Reactivity)이다.

선언적 렌더링(Declarative Rendering): 자바스크립트 상태를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있다.

반응성(Reactivity): 자바스크립트 상태 변경을 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동수행한다. 즉, 데이터가 바뀌면 화면이 바뀐다. Vue 컴포넌트는 옵션API와 컴포지션API 이렇게 두가지 스타일로 작성할 수 있다.

옵션 API

옵션 API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직를 정의한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <script>
      const App = {	// Vue의 옵션을 객체로 설정한다. <- 옵션API
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          increase() {
            this.counter++
          }
        }
      }
      const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>

Vue.createApp(App): Vue 어플리케이션을 반환한다.
mount("#app"): Vue 어플리케이션에 HTML을 연결한 인스턴스를 반환한다.

데이터

Vue 옵션에서 data()가 데이터이다. 초기 반응형 상태를 반환하는 함수로 지정한다.
일반함수 방식을 사용하고(화살표 함수X), return 반환값으로 사용할 데이터를 지정해야한다.

일반함수로 구현한 data() 내부에서 this를 사용하면 생성된 인스턴스에 접근할수 있지만 화살표함수로 data()를 구현하면 this는 window를 가리킨다
옵션 - 메소드
Vue 옵션 내에서 methods()로 사용할 메소드를 선언합니다.

메소드

Vue 옵션 내에서 methods()로 사용할 메소드를 선언한다.
methods: {...} 내에서 메소드형태의 객체로 선언한다.
메소드 또한 일반함수를 사용한다. this를 통해 컴포넌트 인스턴스에 접근할 수 있도록 하기 위해서이다.

디렉티브

v- 접두사가 있는 특수한 속성을 디렉티브라 한다. v-html과 v-bind를 포함하여 빌트인 디렉티브를 제공한다.

v-bind 디렉티브는 HTML 속성을 반응적으로 업데이트하는 데 사용된다.
v-bind의 약어는 :
v-on 핸들러에 이벤트 이름도 동적으로 바인딩 할 수 있다.
v-on : 이벤트 = "이벤트핸들러"
v-on의 약어는 @이벤트명

생명 주기 훅(lifecycle hooks)

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 해준다.

인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 mounted, updated, unmounted가 있다.
모든 생명 주기 훅은 호출하는 현재 활성 인스턴스를 가리키는 this 컨텍스트로 호출된다.(생명 주기 훅을 선언할 때 화살표 함수를 사용해선 안 된다. 왜냐하면 this 를 통해 컴포넌트 인스턴스에 접근할 수 없기 때문이다.)

생명 주기 표

위 그림을 보면 빨간색 박스로 처리된 분기점이 생명 주기에서 중요한 부분이다.

애플리케이션 생성 전: beforeCreate(), 생성 후: created()
DOM과 연결 직전: beforeMount(), DOM 연결 직후: mounted()
화면 업데이트 전: beforeUpdate(), 화면 업데이트 후: updated()
화면 마운트 해제 전: beforeUnmount(), 화면 마운트 헤제 후 : unmounted()

템플릿 문법

Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한다.

텍스트 보간법

데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법이다.

<span>메세지: {{ msg }}</span>

v-once 데이터갱신 없이 고정된 데이터 사용할 때 이 디렉티브를 사용한다.

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

원시 HTML

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석한다.
실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다.

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

XSS공격에 주의해야한다. => 신뢰할수 없는 스크립트를 바로 실행하면 문제가 있다.
반드시 신뢰할 수 있는 콘텐츠에서만 사용하고 유저가 제공한 컨텐츠에서는 사용하지 말자.

속성 바인딩

이중 중괄호는 HTML 속성 내에서 사용할 수 없다. 사용하려면 v-bind 디렉티브를 사용하자.

<div v-bind:class="dynamicClass"></div>

데이터 값인 dynamicClass 를 class 속성 값으로써 사용할 수 있다
만약 boolean 속성이 들어간다면, 해당하는 속성이 boolean 에 따라 출력되지 않거나 출력된다. (truthy, falsy한 값들도 가능하다.)

느낀점😀😒👍
처음으로 Vue를 배워보았다. 아주 많이 낯설다. 사실 React를 배울 때 보다 훨씬 낯설다. 표기법과 문법이 되게 신기하면서도 또 되게 간단하다. 그래도 js,css,html 기반 프레임워크라 오늘 배운거를 이해하는 데에 있어서는 문제가 없었다... 물론 첫날이라 그런거겠지 앞으로 더 어려워질거 같으니 정신 차려야겠다.