Geuntaek Kwon

Geuntaek Kwon

느루 나아가는 개발자

Vue.js 기초

3 minute read

Vue 란?

프론트엔드 라이브러리! (프레임워크라고 해도 되나? 알아보자.)

Module 개념

  • 비동기 모듈정의(AMD)
  • 만능 모듈정의(UMD): Universal Module Definition

Directive란?

Directive가 사용된 HTML Element의 동작을 변경한다.

Directive의 값을 사용할 때에는 `` 를 사용하지 않는다. Vue가 자동으로 expression을 인식하기 때문. ex) <input type='text' v-model='firstName' /> // O <input type='text' v-model='' /> // X

v-model="variables"

  • <input type="text" value={name} onChange={e => setName(event.target.value)} /> // react version
  • <input type="text" v-model="name" /> // vue version
  • <input type="text" :value="name" @input="updateLastName" /> // another vue version
    • :value 는 변수의 값을 최초 랜더링시에 불러오지만, 그 후 UI에서의 변경을 반영하지는 않음.
    • @input 는 onChange 속성이라고 생각해도 될듯!
    • 즉, :value + @input = v-model

v-bind:xxx

ex) <a href="url" /> // 불가능!!

이럴 때에 Vue 가 제공하는 v-bind directive를 사용해서 동적으로 attributes의 value를 설정할 수 있다.

ex) <a v-bind:herf="url" />

ex) <a :herf="url" /> // short-hand way

v-on:xxx

Event listening을 담당!

ex) v-on:click="age++";

ex) v-on:click="increment"; // 함수호출

ex) @click="increment" // short-hand way

v-if:"conditional"

Conditional rendering에 이용됨. `v-if:”conditional” 에 true인 경우에만 화면에 랜더링 된다. true가 아닌 경우에는 주석처리.

ex) <p v-if="mode == 1"> Hello world! </p> <!-- mode가 1인 경우에만 랜더링 됨. --> 

<p v-if="mode == 1">v-if</p>
<p v-else-if="mode == 2">v-else-if</p>
<p v-else>v-else</p>
<!-- element의 종류는 상관없지만, v-if ~ v-else-if ~ v-else 는 연속적으로 정의해야 한다. 아니면 에러 -->

HTML 구조를 변경하지 않고, 복수의 elements를 조건 랜더링하기

vue의 template element를 사용! react의 <></> 와 같은 역할인듯!

      <p v-if="mode == 1">Showing v-if directive content</p>
      <template v-else-if="mode == 2">
        <p>Bonus content</p>
        <h3>v-else-if</h3>
      </template>
      <p v-else>v-else</p>

v-show="conditional"

Conditional rendering에 이용됨.

v-if 와 다른 점은 v-if 는 주석처리를 통해 화면에서 안 보이게 하지만, v-show 는 css style을 통해서 display: none; 으로 화면에서 지운다.

toggle 동작을 할 때, v-if 보다 가볍게 동작 가능하다.

2-way binding 이란?

js 와 html (directive를 통해) 가 상호적으로 데이터의 변경을 일으킬 수 있다는 의미.

예를 들어,

const vm = Vue.createApp({
  data() {
    firstName: 'hello',
    lastName: 'world',
  }
})
.mount('#app');

// javascript 에서 데이터 변경
vm.firstName = 'HELLO';

// html 에서 데이터의 변경
<input type='text' v-model='firstName' />

알아둘 것

Vue는 HTML elements의 attributes의 value에 expression을 사용할 수 없다.

Computed property

computed:{} 에 정의되어 있는 데이터 또는 함수가 사용하는 변수를 캐싱하고 있어서, 달라진 값이 없으면 랜더링하지 않는다. 변경된 값이 있을 때에만 랜더링!

improve performance!

단, 함수를 사용할 때 파라미터를 전달할 수는 없다.

Watcher

데이터 값에 변화가 생겼을 때, 추가적인 action을 취할 수 있다.

  • Computed property와 다른점은?
    • Computed property는 비동기적으로 동작하지만, watcher는 동기적으로 동작한다는 차이가 있다.

동적으로 class 설정

:class 를 통해서 동적으로 클래스를 할당할 수 있다.

ex)

<div class="circle" :class="{ purple: isPurple }">circle</div>
<!-- :class="{ data-name: class를 동적으로 적용시킬 조건 }"  -->

computed property 를 사용해서 조건에 변경이 일어난 경우에만 동적으로 class할당을 할 수 있도록 할 수 있다. (improve performance)

ex)

<div class="circle" :class="circle_classes">circle</div>

Vue.createApp({
  data() {
    return { isPurple: false }
  },
  computed: {
    circle_classes() {
      return { purple: this.isPurple }
    }
  }
}).mount('#app')

array를 이용해서 복수의 클래스를 적용 할 수 있다.

<div class="circle" :class="[firstClassName, sndClassName]">circle</div>

Lifecycle Hooks

  • beforeCreate
  • created
    • 단순하게 데이터와 관련된 변경을 할 때는 created lifecycle을 통해 접근한다.
  • beforeMount
  • mounted
    • template와 관련된 변경을 할 때는 mounted lifecycle을 통해 접근한다.
  • beforeUpdate
    • 어떤 데이터가 변경되었는지는 알 수 없다.
  • updated
  • beforeUnmount
  • unmounted

Virtual DOM(Document Object Model)이란?

  1. Javascript object다.
  2. lightweight DOM 버전이다.
  3. Virtual DOM을 통해 빠르고 가볍게 데이터에 변화가 있는지를 확인할 수 있다.
    • DOM에 직접 접근해서 확인하는 것보다 빠르다. (JSON이기 때문이겠지?)
  4. Virtual DOM을 통해 데이터의 변화가 확인되면, DOM에서의 해당 부분만 변경한다.

Reactivity

Vue는 Proxy를 통해 Reactivity를 제공한다.

Proxy란?

Javascript Object를 감시할 수 있게 도와주는 객체!

Vue는 Proxy를 사용하고 있는 방법

Proxy doc

<!-- DOM  -->
<div id="name"></div>

// virtual DOM (구조는 다름..! 우선 간단히.)
const data = {
  name: 'Hello world'
};

// Proxy
const observedData = new Proxy(data, {
  /**
  * target: represent target object (equivalent to this)
  * key: key value
  * value: value of the property(key)
  */
  set(target, key, value) {
    // it's called before update
    document.querySelector("#name").innerText = value;
    target[key] = value;
  }
});

You May Also Enjoy