231120 [Day 45] Vue (1)

Vue

사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크

 

<공식 문서>

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

반응형 데이터 (반응성) : 데이터가 바뀌면 화면도 바뀐다.

 

타이머함수 콜백을 작성할 때 화살표 함수를 사용해야한다.

=> 일반함수(function)를 사용하면 정상적으로 작동하지 않는다.

=> 일반함수에서의 this 는 함수가 '실행(호출)' 되는 위치에서 정의 된다.

this 를 통해 counter 같은 반응형 데이터에 접근해야하는데 this가 유효하게 해당 데이터에 접근이 가능하도록 화살표 함수를 써야한다.

 

 

 

• html의 컨텐츠를 출력할 때는 이중 중괄호 {{ counter }}
• html 속성에 데이터를 연결할 때는 디렉티브 v-bind: 

html에 바로 js 데이터를 입력하면 동작하지 않는다.

class에 데이터를 넣을 때 v-bind:class="" , 디렉티브라는 vue.js 문법을 붙여주어야한다.

=> 디렉티브가 붙어있는 속성은 거기서 사용하는 값이 자바스크립트의 데이터로 읽힐 수 있고, 데이터라는 메소드에 선언한 데이터를 연결해서 쓸 수 있다.

 

 

 

click me 버튼을 누를 때 마다 methods의 increase 메소드를 실행할 수 있도록 연결

 

 

 

Hello Vue! 를 화면에 보여지거나 보여지지 않게 v-if="active"

 

 

 

fruits 배열 데이터를 v-for 디렉티브에 입력

매개변수 in fruits

{{ 매개변수 }} : 매개변수로 반복되는 아이템을 출력

 

v-for : 특정 데이터(배열, 객체 등)를 반복 출력

 

 

컴포넌트

 

Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스 이다.

컴포넌트를 만들어서 반복으로 출력하거나 특정한 내용을 컴포넌트화(캡슐화)해서 정의할 수 있다.

 

*html에서는 대시케이스(-) , js에서는 카멜케이스

 

 

애플리케이션과 인스턴스 생성

1) createApp 메소드로 vue.js 애플리케이션을 만들고

2) mount 메소드를 통해서 html에 연결한다.

3) html 구조를 자세하게 제어할 수 있는 인스턴스가 반환된다. (viewModel = vm)

4) 인스턴스 활용

 

인스턴스 속성 : vm.$data 이런식으로 $data, $props, $el 등 인스턴스 속성들을 사용할 수 있다.

인스턴스 메서드

 

아래처럼 변경

 

 

라이프 사이클

 

beforeCreate 만 this 를 다룰 수 없음을 알 수 있다. 할 수 있는 것이 제한적이라서 활용도가 떨어짐

 

 

created

beforeMount

 

mounted에서만  DOM과 연결된 직후 h1나옴 

DOM API를 다룰 수 있다.

 

 

데이터를 수정하게 되면 무엇인가 업데이트가 되었다는 라이프 사이클이 동작한다.

=> beforeUpdate, updated

 

 

연결된 어플리케이션이 해제된다.

=> beforeUnmount, unmounted

 

app.unmount() 를 실행하면 화면에 아무것도 나오지 않는다.

 

 

템플릿 문법

v-once

데이터를 화면에 한 번만 출력하면 되고 반응성을 가질 필요가 없을 때

 

v-html

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석한다.

실제 html 구조대로 출력하고 싶을 때

텍스트 보간법 사용: <span style="color: red">이것은 빨간색이어야 합니다.</span>

v-html 디렉티브 사용: 이것은 빨간색이어야 합니다.

 

*웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점이 쉽게 발생할 수 있으므로 매우 위험할 수 있다. 신뢰할 수 있는 컨텐츠에만 v-html을 사용하고 사용자가 제공한 컨텐츠에는 절대 사용하면 안된다.

 

 

속성 바인딩

이중 중괄호는 HTML 속성(attribute) 내에서 사용할 수 없다. => v-bind 사용 (: 단축문법 사용가능)

 

- 불리언 속성 

<button :disabled="isButtonDisabled">버튼</button>

 

isButtonDisabled에 truthy 값이 있는 경우, disabled 속성이 표기되고  falsy 값의 경우 속성이 생략

 

JavaScript 표현식 사용

{{ number + 1 }}

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

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

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

• 이중 중괄호(텍스트 보간법) 내부
• 모든 Vue 디렉티브 속성(v-로 시작하는 특수 속성) 내부

 

하나의 표현식만 가능

표현식은 값으로 표현할 수 있어야 한다. (return 뒤에 올 수 있는 코드)

 

아래 코드들은 작동하지 않는다.

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

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

 

 

디렉티브

v- 접두사가 있는 특수한 속성

 

인자

디렉티브 뒤에 콜론(:)으로 표시되는 "인자"를 사용할 수 있다.

<a v-bind:href="url"> ... </a>

<!-- 단축 문법 -->
<a :href="url"> ... </a>

<!-- 동적 인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>

 

<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>

 

동적인 인자

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

특정 데이터를 연결해서 동적으로 사용할 수 있다.

 

 

Data와 Methods

컴포넌트는 재사용이 중요하기 때문에 data를 함수로 만들어서 반환할 수 있는 구조를 만들어야한다.

 

프록시

• Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다.
• 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재정의할 수 있다.
• 두 개의 매개변수를 사용하여 Proxy를 생성
  • target: 프록시할 원본 객체
  • handler: 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체

 

 

proxyA에 값을 할당해주면 그 값이 proxyB에서도 그대로 출력된다.

 

 

이 문제를 해결하기 위해 데이터를 함수로 만들어주어야한다.

 

 

methods

• Vue는 methods 안에서 컴포넌트 인스턴스를 항상 참조할 수 있도록 this(vm) 값을 자동으로 바인딩한다.
• 메서드가 이벤트리스너나 콜백으로 사용될 때, 올바른 this 값을 유지하게 된다.
• 메서드를 정의할 때, 화살표 함수를 사용해서 메서드를 정의하면 뷰가 적절한 this 값을 바인딩하지 못한다.
• 컴포넌트 템플릿 내부에서 접근할 수 있다. (이벤트 리스너로 사용됨)

<button @click="increment">Up vote</button>

 

버튼을 클릭하면 increment 메서드가 호출된다.

 

vue는 디바운싱, 쓰로틀링을 제공하지 않는다.