Vue 의 특징

Vue.js의 동작원리 : 가상 DOM으로 화면요소를 변경 및 조작하고 최종 결과물을 DOM tree에 반영

DOM ( Document Object Model) : HTML 내에 들어있는 요소를 구조화 객체 모델로 표현하는 양식

HTML 문서가 아래와 같다면

<html>

<body>

<p>Hello World</p>

</body>

</html>

DOM트리는 밑에로 구성된다.

DOM의 문제점은 : DOM을 업데이트하기 위해 수천개의 노드를 뒤져가며 처리해야하기 떄문에 복잡하다.

Vue의 특징

1. 가상 DOM

DOM을 최소한으로 조작하여 작업을 처리하는 방식, DOM의 복사본을 메모리 내에 저장하여 사용

실제 DOM을 조작하는 대신, 이것을 추상화 시킨 자바스크립트 객체인 가상DOM을 사용해 자바스크립트가 HTML을 렌더링하는 방법

기존 DOM API를 사용하여 DOM을 변경하는 방법

 
<div id="main">
    <h1>Header</h1>
    <p>Description</p>
</div>

document.getElementById('main').appendChild('<p>Hello World</p>');

가상 DOM 노드들은 이처럼 자바스크립트 객체 형식으로 표현 될 수 있다.

Let domNode = {
  tag: 'div',
  attributes: { id: 'main' }
  children: [
      // where the h1 & the p's would go
  ]
};

domNode.children.push('<p>Hello World</p>');

그런 다음 아래 코드를 통해 가상 돔 변경 부분과 실제 돔의 동기화 작업이 이루어 지게 된다.

sync(originalDomNode, domNode);

이런 방법으로 한 번의 상태 변경으로 여러곳의 DOM이 변경된다고 해도 가상화된 DOM에서 전부 변경하고 진짜 돔과 비교해서 변경된 부분을 한번에 적용시키는 방식으로 DOM의 렌더링 횟수를 줄이게 된다.

-가상 DOM 사용이유

실제 DOM을 수정하는 과정이 자바스크립트에서 메모리 상의 객체를 수정하는 것보다 오래 걸림

DOM을 반복적으로 직접 조작하게 되면 브라우저 렌더링 횟수가 증가하고 결과적으로 PC자원의 비효율적인 소모!

Vue는 View와 Model 사이에 ViewModel에 해당하는 화면단 라이브러리라고 볼 수 있다.

DOM Listners : DOM의 변경 내역을 즉각적으로 반응하여 특정 로직을 수행하는 장치
Data Binings : View에 표시되는 내용과 Model의 데이터를 동기화

2. 컴포넌트 기반 프레임워크

화면을 여러개의 작은 단위로 쪼개어 개발 → 재사용성↑, 구현 속도↑, 코드 가독성↑

3. React와 Angular 의 장점을 가지고 있음

Angular의 장점인 양방향 데이터 바인딩(화면표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경) + React의 장점인 컴포넌트의 단방향 데이터 통신 구조( 상위 컴포넌트 -->하위 컴포넌트), 가상 DOM렌더링 방식(화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신)

-Vue의 단점: 다른 프레임워크보다 생태계가 작다...

Vue의 라이프사이클

훅이란? 발생하는 함수 호출, 메시지 , 이벤트 등을 중간에서 바꾸거나 가로채는 행위나 기술을 의미한다.

대분류로 생성-마운트-업데이트-삭제 의 4단계의 생애를 가진다.

created
인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의미하는 옵션 처리를 완료합니다.
mounted
- DOM이 메모리에 생성되고 렌더링 된 이후에 실행, 전체 랜더링 상태를 보장하지 못함
- 마운트는 컴포넌트가 DOM에 삽입 또는 그려졌다라고 생각하면 된다.
- vm.$nextTick을 사용하면, 전체 렌더링 상태를 보장할 수 있음
  - 비동기, setTimeout과 비슷한 역할
- mounted 순서 주의
  - child가 있을 경우, child 컴포넌트의 mounted를 기다린 후에, 부모 컴포넌트의 mounted가 실행됨
```
mounted() {
  this.$nextTick(function () {
    // 전체 화면내용이 렌더링된 후에 아래의 코드가 실행됩니다.
  })
}
```
updated
- 모든 child 컴포넌트들의 렌더링 상태를 보장하지 않음.
- 컴포넌트가 업데이트 되어, 다시 그려지면 실행되어지는 라이프 사이클 훅이다.
- 데이터가 변경되어 가상 DOM이 다시 렌더링되고 패치된 후에 호출됨.
- mounted와 마찬가지로, vm.$nextTick를 사용 시에 전체 렌더링 상태를 보장할 수 있음.
```
updated() {
  this.$nextTick(function () {
    // 전체 화면내용이 다시 렌더링된 후에 아래의 코드가 실행됩니다. 
  })
}
```
destroyed
컴포넌트가 제거 될때, 호출 되는 라이프 사이클 훅

등등이 있음 참고링크 : https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html

라이프사이클 훅 | Vue.js

라이프사이클 훅 Note 모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩되어 있으므로, data, computed 및 methods 속성에 접근할 수 있습니다. 즉, 화살표 함수를 사용해서 라이프사

v3.ko.vuejs.org

ref :가상 DOM을 조작하는 속성

기존 getElementsById getElementsByClassName Document.creatElement() 을 통해 직접 DOM에 접근해서 조작하는 함수를 대신해 사용됨. 물론 개발자가 dom에 접근하지 않게 하는 vue의 목적에 반하기 떄문에 굳이해야하는 경우에만 ref 속성사용

<input ref="input">

--------------script에서 접근------------

methods: {
  // Used to focus the input from the parent
  focus: function () {
    const target = this.$refs.input
    target.focus()
  }
}

Vue Router는 url 경로마다 띄워줄 Component를 설정하는 것이다. Vue-router를 이용하면 SPA를 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있게 된다. vue router의 기본경로는 기본도메인/#/ 이다. 따라서 기본 경로에 #을 없애고 싶으면 router의 mode를 history로 설정해야한다.

Vue router 기본 사용법 및 # 없애는 법 참조링크 : https://hyeooona825.tistory.com/44

[Vue.js] router 사용해보기

vue router 는 url 경로마다 띄워줄 component 들을 설정하는 것입니다. vue-router 를 이용하면 SPA(Single Page Application) 을 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있습니다. 참고로 v..

hyeooona825.tistory.com

vue의 디렉티브 : Vue 의 기능들을 사용하기 위해서 사용하는, HTML 태그 안에 들어가는 하나의 속성입니다.

ex) v-text, v-html, v-show, v-if, v-bind 등등,,.

vue에서 HTML 태그 안의 내용을 vue 인스턴스 안의 데이터 값으로 설정하기 위해선 {{ }} 머스태쉬 태그를 사용한다.

하지만 HTML 태그의 속성값에 vue 인스턴스안의 데이터값을 사용하기 위해선 <img src={{ image }}/> 이렇게 사용하면 오류는 안나지만 작동은 안하는 경고가 발생한다.

따라서 우리는 v-bind를 써서 <img v-bind:src="image"/> 와 같이 사용한다

더 간단하게는 v-bind를 생략해서 사용도 가능하다. 그냥 콜론뒤에 속성의 이름 넣어주면 된다.

더 나아가서는 머스태쉬 태그나, 디렉티브를 사용 할 때, 그 내부의 값을 꼭 데이터 명으로 해야 하는건 아니다 그안에 자바스크립트 표현식을 사용 할 수도 있다.

var app = new Vue({
  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
  // data 는 해당 뷰에서 사용할 정보를 지닙니다
  data: {
    name: 'Vue',
    smile: true,
    feelsgood: 'https://imgh.us/feelsgood_1.jpg',
    feelsbad: 'http://imgh.us/feelsbad.jpg'
  }   
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="app">
    <h1>Hello, {{ name }}</h1>
    <h2>{{ Date() }}</h2>
    <img :src="smile ? feelsgood : feelsbad"/>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

'Develop' 카테고리의 다른 글

프론트엔드 Netlify 를 통한 CI/CD (0)	2021.09.28
Property or method "" is not defined (0)	2021.09.27
부트스트랩 템플릿 사용시 충돌 이슈 (0)	2021.09.26
[JavaScirpt] Optinal Chaining / Safe Operator (0)	2021.09.26
좋은 코드란...(코드리뷰, 클린코드, 협업하기 좋은코드) (1)	2021.09.01