작고 소중한 Vue를 알아보자

작고 소듕해…

안녕하세요 오픈소스컨설팅 Playce Dev 팀 Front-End 개발자 이정현입니다!

최근 다양한 프론트엔드 기술이 나오게 되면서 무조건 트렌드를 따르기보다 현재 기술을 왜 사용하고 그와 비교해 다른 기술의 특징과 장단점은 뭘까? 라며 왜? 라는 의문을 해결해보고자 합니다.

들어가기 전에…

저희 Playce Dev 팀에서는 Frontend 기술로 React를 사용해 개발을 진행하고 있습니다. ‘React를 왜 사용하고 있나요?’ 라는 질문에 ‘대세이기 때문이죠’라는 대답보다는 ‘아~ 다른 기술과 비교해보았을 때 이런 부분이 뛰어났고 저희 프로젝트엔 ~~한 이유로 React가 적합해서 사용하게 됐습니다’ 라고 답변할 수 있도록 탐구해보았습니다!

저는 Vue의 조사를 맡게 되었는데요, Vue란 무엇이고 어떤 특징이 있으며 React와 비교해 좋은 점과 아쉬운 점을 알아보도록 하겠습니다.

Vue.js란?

Vue.js는 Google Creative Laps에서 근무하던 Evan You가 개발하였으며, “AngularJS 에서 내가 좋아하는 특성만 담은 가벼운 라이브러리를 만들 수 있지 않을까?” 라는 점과 좀더 쉽게 접근할 수 있는 웹 프레임워크를 만들고자 탄생하게 되었습니다.

Vue의 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하며, 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 것이죠! 단일 프레임워크와는 달리 Vue는 이를 점진적으로 채택할 수 있도록 설계되어 progressive 프레임워크라고 표현한답니다.

Github 공식 문서

최신 버전 (2022.04.26 기준): v3.2.33

---

Vue.js의 특징을 알아보자

이제 Vue가 무엇인지 알았으니 Vue의 특징을 살펴보도록 하겠습니다!

• Virtual DOM의 사용

Vue에서도 React와 마찬가지로 Virtual DOM방식을 사용합니다. 과연 이 Virtual DOM이 무엇이고 사용하면 어떤 게 좋은지 알아보도록 하겠습니다.

virtual DOM이란

virtual DOM은 실제 DOM을 너무 많이 업데이트하는 비효율적인 연산을 줄이고자 만들어진 가상의 DOM입니다. 또한 DOM 구조를 체크하고 변경하는 방식이 복잡하여 단순화/자동화 하기 위해 만들어지기도 하였습니다. Virtual DOM은 메모리에 저장되어 사용됩니다.

Virtual DOM 동작 원리

그럼 Virtual DOM을 이용한 동작 원리가 어떻게 이루어지는지 알아봅시다.

1. UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링합니다.
2. 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산합니다.
3. 변경된 부분만 실제 DOM에 반영합니다.

virtual DOM 장점

가상 돔(Virtual Dom) 렌더링은 변경된 부분만 DOM에 적용하는 방식으로 DOM 처리 횟수를 최소화하고, 상태 변화에 대해 자동으로 관리되어지며, 효율적인 빠른 화면 렌더링(Redering)이 가능해집니다.

Virtual DOM 최적화

기존 Vue의 렌더링을 위한 virtual DOM 설계는 변경이 필요한 부분만 확인하는 것이 아닌 매번 전체 트리를 확인했기 때문에 비효율적이고 불필요한 탐색이 포함될 수밖에 없었습니다.

Vue는 이같이 불필요한 탐색을 제거하고 렌더링 성능을 향상시키고자 Vue.js 3.0에서 Virtual DOM 최적화 작업을 진행하였습니다.

• 첫 번째로 템플릿 구문에서 정적 요소와 동적 요소를 구분하여 트리를 순환할 때 동적 요소만 순환할 수 있도록 하였습니다. 구문 내의 정적인 영역을 미리 블록으로 구분하여 렌더링시 정적 블록에는 접근하지 않고 동적인 요소가 있는 코드에만 접근해 렌더링 트리의 탐색을 최적화하는 방식입니다.
• 두 번째로 렌더링 시 객체가 여러 번 생성되는 것을 방지하기 위하여 컴파일러가 미리 템플릿 구문 내 정적 요소, 서브 트리, 데이터 객체 등을 탐지해 렌더러(Renderer) 함수 밖으로 호이스팅(Hoisting) 합니다. 이를 통해 렌더링 시 렌더러마다 객체를 다시 생성하는 것을 방지하여 메모리 사용량을 낮추었습니다.
• 세 번째로 컴파일러가 미리 템플릿 구문 내에서 동적 바인딩 요소에 대해 플래그를 생성합니다. 컴파일러가 미리 생성해 둔 플래그로 필요한 부분만 처리하여 렌더링 속도를 향상시킬 수 있습니다.

• SFC (Single-File Component)

SFC는 Vue가 권장하는 Vue 컴포넌트 전용 파일 포맷입니다. Single File Component의 약자로 단일 파일 컴포넌트를 말하며 하나의 파일이 하나의 컴포넌트가 된다 라는 의미입니다.

HTML, CSS, JavaScript를 <template>, <script>, <style> 블럭으로 캡슐화하여 하나의 같은 .vue 파일 내에 정의됩니다. 이러한 패턴 덕분에 웹 표준이 잘 지켜지고 있으며, 코드의 가시성과 생산성이 좋다고 평가됩니다.

• Tree Shaking

트리쉐이킹은 나무를 흔들어 잎을 떨어뜨리듯 모듈을 번들링하는 과정에서 사용하지 않는 코드를 제거하여 파일 크기를 줄이고 로딩 성능을 향상시키는 최적화 방안을 의미합니다. Vue3에서 이를 강화하여 번들 크기를 절반 이상으로 대폭 줄일 수 있었습니다.

• 양방향 데이터 바인딩

양방향 데이터 바인딩은 Vue 인스턴스와 component가 서로의 데이터에 접근하는 것을 말합니다. Vue에서도 기본적으로 데이터가 단방향으로 흐르지만 v-model 디렉티브로 양방향 데이터 바인딩을 지원합니다.

예시로 사용자가 Input에 입력하는 값을 실시간으로 반영하는 코드를 react와 비교해보도록 하겠습니다.

먼저 React에서의 코드를 살펴보도록 하겠습니다.

const [todo, setTodo] = useState<string>('');

const onChange = (e: ChangeEvent<HTMLInputElement>) => {
  setTodo(e.target.value);
};

return (
  <input value={todo} onChange={onChange}></input>
);

input에 입력되는 값이 state에 반영되기 위하여 onChange 함수를 통해 값의 변화가 있을 때마다 입력된 값을 저장하는 식으로 작성되어 있습니다.

그렇다면 이러한 동작을 vue에서는 어떻게 구현할까요?

<template>
    <input v-model="todoTitle" type="text" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const todoTitle = ref("");
    
    return {
      todoTitle,
    };
  },
});
</script>

input의 변경값을 반영하기 위해 react처럼 onChange 함수를 이용하지 않아도 양방향 바인딩이 되는 v-model을 이용해 상태를 반영할 수 있습니다.

이러한 기능의 지원으로 onChange 함수를 작성해야 되는 코드를 vue에서는 양방향 바인딩을 간단히 구현할 수 있습니다!

• component 기반

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있으며, 코드를 쉽게 이해하고 재사용할 수 있습니다.

• vue-cli

vue-cli는 기본 Vue 개발 환경을 설정해주는 도구로, 자동으로 Vue 프로젝트를 생성합니다. babel과 webpack 그리고 라이브러리까지 관리하는 프로젝트를 쉽게 구축할 수 있습니다. 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민과, lint와 build는 어떤 라이브러리로 구성을 해야되는지, webpack 설정은 어떻게 해야되는지에 대한 고민을 덜 수 있습니다.

• Template 문법

Vue는 브라우저 화면에 렌더링 하는 과정에서 템플릿이란 문법을 사용합니다. Vue 템플릿은 HTML, CSS 등의 마크업 속성과 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 HTML 형태로 변환해줍니다.

• TypeScript 지원

Vue에서도 TypeScript를 지원합니다. Vue2에서 TypeScript를 사용할 때 가장 큰 문제점은 기능을 구현하기까지 너무 많은 비용이 들고 타입 감지가 안 된다는 이슈가 존재하였습니다.

하지만 Vue3에서 TypeScript가 완전히 다시 작성되어 TypeScript 지원이 간편해지고 Vuex, Route 등에서도 TypeScript 사용이 훨씬 더 편리해졌습니다.

---

Vue Life Cycle

vue의 라이프사이클입니다. Vue 인스턴스가 생성되고 dom에 부착되고, 업데이트 되며 없어지는 이 과정에서 vue는 각각의 단계에서 훅을 할 수 있도록 api를 제공하고 있습니다.

• beforeCreate

인스턴스가 초기화 된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출됩니다.

• Created

인스턴스가 생성된 직후 동기적으로 호출됩니다.

• beforeMount

마운트 시작 직전 호출되며 render 함수가 처음으로 호출됩니다.

• mounted

Virtual DOM이 실제 브라우저 DOM에 Mounted 되고 난 후 동작하는 훅입니다.

• beforeUpdate

reactive 데이터가 변경되고, DOM이 리렌더 되기 전 실행됩니다.

• updated

reactive 데이터가 변경되고, DOM이 리렌더 된 후 실행됩니다.

• beforeUnmount (beforeDestroy)

뷰 인스턴스가 제거되기 직전 실행됩니다.

• unmounted (destroyed)

뷰 인스턴스가 제거된 후 실행됩니다.

---

Vue 사용해보기

vue-cli 설치

npm install -g @vue/cli

typescript 프로젝트 생성

vue create [프로젝트명]

create 후 Manually select features 을 선택합니다.

프로젝트에서 사용할 추가적인 기능으로 TypeScript를 선택해주었습니다.

나머지 옵션 선택은 위 사진과 같이 진행하였습니다.

실행하기

npm run serve

---

Vue 무엇이 좋은가?

앞서 많은 Vue의 많은 특징들이 소개되었는데요. 그래서 vue의 어떤 점이 좋은 건지 요약해 봅시다.

• Angular, React에 비해 작고 가벼우며 learning curve가 낮습니다.
• React(Virtual DOM 기반 랜더링)와 Angular(양방향 데이터 바인딩)의 장점을 갖고 있어 성능이 우수하며 가볍고 빠릅니다.
• 싱글파일 컴포넌트 개발이 가능합니다.
• 컴포넌트라는 작은 단위로 쪼개어 관리되므로 유지보수와 재사용성이 높습니다.

---

Vue vs React

Better

• React에서는 모든 것이 JavaScript이며 이런 방향성이 과연 편리할까 라는 의문을 갖고 만들어진 것이 Vue.js 입니다. Vue는 js를 많이 알지 않더라도 기본적인 사용이 가능하도록 낮은 진입문턱을 제공하고 있습니다.
• React는 상태가 변경되면 해당 컴포넌트부터 자식 컴포넌트 트리까지 리렌더링합니다. Vue는 렌더링 중 컴포넌트의 종속성이 자동 추적되기 때문에 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고 변경해줍니다.
• 렌더링 성능의 핵심은 DOM 조작 관련 작업을 최소화하는 것으로 최소한의 오버헤드만 가하는 것입니다. 같은 조건의 DOM 조작시 최소한의 오버헤드 측면에서 Vue의 가상돔이 훨씬 가볍습니다.
• React는 라이브러리로 프로그래밍 방법이 자유롭습니다. 이는 팀 간의 코드 작성 방식에서 많은 협의가 필요하다는 의미이기도 합니다. 반면, Vue 프레임워크는 자유도가 덜하지만, 그만큼 제약된 조건에서 프로그래밍이 되므로 팀 간에 컨벤션 협의가 많이 요구되지 않습니다.

Worse

• React는 Facebook에서 개발되어 유지관리되고 있습니다. 이러한 측면에서 React를 사용하는 개발자나 기업들은 React의 지속적인 버전업을 신뢰할 수 있습니다. 하지만 이와 반대로 Vue는 1명의 개발자 Evan You에 의해 제작되었고 업데이트 주기가 일정하지 않다는 문제가 있습니다.
• 아래 그래프에서 볼 수 있듯이, React가 가장 인기 있는 라이브러리라는 사실은 부정할 수 없습니다. 인기가 많다는 건 단순히 인지도 측면 외에도, 더 많은 튜토리얼과 기사들, Stack Overflow 등의 더 많은 질의 응답이 있다는 걸 의미합니다. 그리고 더 많은 툴과 확장 라이브러리들이 존재하기 때문에 개발자가 쉽게 재사용할 수 있습니다.

• Vue는 팀 간에 컨벤션 협의가 많이 필요하지 않다는 장점과 동시에 자유도가 제한된다는 단점이 존재합니다. 작은 생태계 또한 고민할 수 있는 기술의 선택지가 적다는 점에서 자유도가 제한된다는 점에 기여한다고 볼 수 있습니다.

---

Vue를 사용해보며 느낀점

Vue가 작고 가볍다고 유명하여 같은 기능을 수행하는 프로젝트로 React와 Vue의 번들링된 사이즈를 비교해 보았습니다.

Vue

React

구현한 프로젝트의 규모가 크지 않아 큰 차이를 볼 수는 없었지만 vue가 좀더 작다는 걸 확인할 수 있습니다. 프론트엔드에서 번들링 사이즈 줄이기는 중요하게 다뤄지는 난제 중 하나이며 프로젝트의 규모가 커졌을 때 이와같은 차이와 이점을 극명히 볼 수 있을 것입니다.

코드를 직접 작성해보며 느낀 바로는 Vue가 React에 비해 learning curve가 확실히 낮았고, React를 알게 되었을 때 처음 보는 JSX 문법은 생소하였지만 싱글파일 컴포넌트를 사용하는 Vue는 기존에 html, js, css로 개발하던 방식과 유사하여 쉽게 다가갈 수 있었습니다.

또한 양방향 바인딩 기능의 지원으로 v-model을 사용하여 input에 입력되는 text value를 바로 반영해줄 수 있었던 점이 코드 양을 많이 줄일 수 있었고 편리하였습니다.

---

마무리하며…

Vue와 React 모두 뛰어난 도구이며, 프로젝트를 시작하며 어떤 기술을 도입할지는 그 상황과 목적에 따라 적절히 판단하여 사용하면 된다고 생각합니다.

규모가 작고 가벼운 프로젝트를 빠르게 만들고 싶다면 Vue를, 프로젝트의 규모가 크고 점점 더 확장될 것이라면 React를 추천합니다. 또한 회사에 퍼블리셔가 따로 있다면 View와 model의 분리가 확실한 Vue를 사용하는 게 업무 분담에 효율적이라 생각하며, 넓은 커뮤니티 및 개발 인력시장의 혜택을 보고 싶다면 React가 유리해 보입니다. 팀 간 컨벤션 협의 비용을 줄이고 싶다면 Vue를, 커스터마이징 및 자유도가 높은 개발 환경을 선호한다면 React를 사용하면 좋을 거 같습니다.