내 이름은 Vue.js! 내 장점은 말이야~ [스마트인재개발원]

이번 포스팅은 스마트인재개발원 랩실스터디에서 공부한 내용을 담았습니다!

지난주 Vue.js 소개글(1) : https://jaws-coding.tistory.com/18

내 이름은 Vue.js! 나를 소개하지! [스마트인재개발원]

 

이번 포스팅은 Vue.js의 장점과 사용예시를 들어보겠습니다.

 

Vue의 장점은 크게 두 가지로 나뉘어 볼 수 있는데요,

1. 데이터 바인딩

2. 가상 돔 기반 랜더링

으로 나누어서 볼 수 있겠습니다!

 

1. 데이터 바인딩

Vue.js는 data(){}; 안에 보관하고 있는 'key: value' Object 타입의 데이터들의 key 값에 접근하여

바로바로 (산지직송) HTML태그 안에서 데이터 값 변경을 해줍니다.

Vue.js의 데이터 바인딩에는 단방향, 양방향, 내용 바인딩 세 가지가 있습니다.

 

Vue.js의 데이터바인딩

 

① 단방향 - 위의 예시처럼 데이터 값이 변경되면 자동으로 업데이트를 해줍니다.

② 양방향 - input태그와 함께 주로 사용되며 입력시 데이터가 변경 == 변경된 데이터가 출력 됩니다.

<input type="text" v-model="name">
<div>
	입력한내용 : {{name}}
</div>

input박스 안에 초기에 지정한 name 값이 나오게 되며.. input에 값을 입력함과 동시에 div 태그 안의 name

또한 업데이트가 됩니다.

 

③ 내용 바인딩 - v-text, v-html 디렉티브의 사용으로 태그 내부설정이 가능합니다.

각각 innerText, innerHTML에 바인딩 됩니다.

<div v-text="message"></div> <!--1번-->
<div v-html="message"></div> <!--2번-->
<script>
	...
	data:{
    		message:"<h1>this is test message</h1>"
    	}
    	...
</script>

1번의 경우에는 태그가 텍스트 형식으로 출력이 되고

2번의 경우에는 h1 태그가 적용되어 그에 맞게 출력이 됩니다.

 

 

{{ 데이터바인딩 }}을 사용하는 이유는,

첫번째, HTML을 좀더 쉽게 사용하기 위함입니다. 가변적인 데이터를 사용할 때 특히 유용하게 쓰이겠죠??

HTML에 하드코딩을 해 놓으면 어떠한 데이터가 변경이 될 때 일일히 찾아서 변경을 해주거나, 코드가 이리저리 많이 엮여 있다면 더 불편할 것 입니다.

 

두번째, 데이터바인딩을 통해 Vue의 실시간 자동 렌더링 기능을 적극적으로 활용할 수가 있습니다.

 

 

 

2. 가상 돔 렌더링

Vue.js는 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하였습니다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 렌더링 방식보다 더 빠르게 화면을 그릴 수 있습니다.

 

위의 그림은 가상 돔에 대해 간단하면서도 명확하게 표현해준 그림입니다.

위 그림을 설명해 보자면 모델에서 어떠한 변화(보라색 부분)가 일어나게 되면 변화된 부분이 가상 돔에게 전달이 됩니다. 가상 돔은 Real DOM의 구조를 가지고 있으며, Real DOM과 변화된 부분이 정확히 어떻게 달라졌는지 스캔하게 되고 그림에서와 같이 빨간 부분(업데이트 해야하는 부분)을 인식하게 되는 것 입니다.

그렇게되면 이걸 패치(Patch)해서 실제 UI 단에 보여지는 부분에서 변화해야하는 부분(빨간 네모)을 업데이트 하여 보여주게 되는 방식입니다.

 

---

 

지금까지 Vue의 큰 두가지 장점을 알아보았습니다.

그렇다면 그밖의 Vue의 특징은 어떤 것이 있는지 알아보겠습니다!

 

MVVM패턴

Vue.js는 우리가 흔히 알고 있는 MVC 패턴에서 발전 된 MVVM패턴을 따르고 있습니다.

이것은 V-- 즉 View 단이 더 세분화하여 보여지게 된 것입니다.

다음 예시 그림에서처럼 뷰 모델이 반응-요청처리를 해주면서 기존의 C-- (Controller) 단을 겸해서 맡게 되는 것입니다.

이 View모델이 중간 영역을 해결해 줌으로써 Vue만의 즉각적인 반응과 장점을 보여주게 되는 것입니다.

 

 

Vue의 MVVM 구조의 흐름은 다음과 같은 예시로 살펴볼 수 있습니다.

---

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원