Vue vs React (프레임워크 vs 라이브러리)

Vue와 React에 대한 특징을 알아보기 전에 우리는 프레임워크(Framework)와 라이브러리(Library)가 무엇이고, 둘의 차이가 무엇인지를 알아야 한다.

 

개발을 하면서 프레임워크(Framework)랑 라이브러리(Library)라는 용어를 많이 들어봤을 것이다.

두 가지 모두 소프트웨어 개발에 사용되는 도구이지만, 서로 다른 개념을 가진다.

---

프레임워크(Framework)

애플리케이션의 기본적인 구조와 원하는 기능 구현을 위한 필요 기능을 제공하는 하나의 뼈대

 

프레임워크는 개발 시 필요한 필요 기능과 알고리즘, DB연동과 같은 기능을 위해 기본적인 구조를 제공하고, 이러한 구조 위에서 사용자는 코드를 작성하게 된다.

 

즉, 개발자는 프레임워크로 들어가서 프레임워크가 지원하는 문법에 따라 작성한다.

 

장단점

장점	단점
개발 시간을 줄일 수 있음 정형화 되어 있어서 일정수준 이상의 품질 기대 가능 유지보수 용이	너무 의존하면 개발자들의 능력 떨어질 수 있음 습득 시간이 오래 걸림

 

예시

• JAVA 서버 개발에 사용되는 Spring
• Python 서버 개발에 사용되는 Django, Flask
• 안드로이드 앱 개발에 사용되는 Android
• 웹 개발에 사용되는 Angular, Vue.js
• 앱 개발에 사용되는 React Native, Flutter

 

라이브러리(Library)

개발자가 필요에 따라 자신의 코드에 호출하여 특정 기능 수행을 위한 코드의 집합

 

라이브러리는 특정 기능을 수행하기 위한 코드의 집합으로, 미리 작성된 코드나 변수, 함수, 클래스 등이 라이브러리에 포함이 되며, 개발자가 직접 호출하여 사용한다.

 

즉, 개발자는 라이브러리를 호출하여 자신의 코드의 특정 부분을 라이브러리로 대체하거나 추가할 수 있다.

 

예시

• Python pip로 설치한 패키지 또는 모듈 (pandas, tensorflow 등)
• HTML의 클라이언트 사이드 조작을 단순화하는 JQuery

 

프레임워크와 라이브러리의 차이

프레임워크와 라이브러리 둘 다 소프트웨어 개발을 더 쉽고 빠르게 하기 위해 사용되며,

이러한 둘의 차이는 제어 흐름에 대한 주도성이 누구에게 있는지에서 알 수 있다.

 

프레임워크는 전체적인 코드의 흐름을 프레임워크가 제어한다. 개발자는 프레임워크가 정의한 구조 안에 필요한 코드를 추가하면 되기에 프레임워크가 개발자 코드를 호출하여 필요한 기능을 수행하도록하는 제어의 역전 개념을 따르고 있다. 따라서 프레임워크의 제어 흐름의 주도성을 프레임워크가 가진다.

 

반면에 라이브러리는 개발자가 전체적인 흐름을 직접 만들고, 개발자가 라이브러리를 호출하여 사용하기에 제어 흐름의 주도성을 개발자가 가진다.

 

전체적으로 보면 프레임워크는 라이브러리를 포함하며 개발자 코드를 호출하고, 개발자 코드는 라이브러리를 호출하는 구조임을 알 수 있다.

---

그렇다면 이제 Vue와 React에 대한 개념을 알 수 있다.

 

Vue는 프레임워크이고, React는 라이브러리이다. 이 둘은 모두 사용자 인터페이스(UI)를 개발하기 위한 프레임워크이다.

 

Vue

Evan You에 의해 만들어진 단일 파일 컴포넌트 기반의 JavaScript 프레임워크

 

웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를   .vue  확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 

 

React

Facebook에서 만든 JavaScript 라이브러리

 

Facebook의 지원을 받는 만큼 지속적인 버전 관리와 많은 사용자로 인해 다양한 레퍼런스와 확장 라이브러리가 많다.

 

Vue와 React의 공통점

Vue와 React 모두 컴포넌트 기반의 Virtual DOM 방식이라는 공통점을 가지고 있으며, 가볍고 빠르다는 장점을 가진다.

 

재사용이 가능한 UI 코드 조각인 컴포넌트를 사용한 컴포넌트 기반의 개발을 하면,

웹 페이지에서 반복되는 요소를 하나의 컴포넌트로 만들어서 조합하는 형식으로 화면을 구성할 수 있다.

쉽게 말하면 블록 쌓기를 한다고 생각하면 된다.

 

컴포넌트 기반의 개발을 하게 되면 일관적인 UI를 구성할 수 있고,

이미 만들어진 컴포넌트의 콘텐츠를 변경하여 사용하는 효율적인 프로그래밍이 가능하다.

 

Virtual DOM은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 DOM(Document Object Model)을 가볍게 만든 JavaScript 표현이다. 이 Virtual DOM은 가상으로 스크린에 렌더링하는 것이기에 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다는 장점을 가진다.

 

DOM

<ul class="animal">
  <li>dog</li>
  <li>cat</li>
</ul>

 

Virtual DOM

{
  type: "ul",
  props: {
    "class": "animal"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "dog"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "cat"
      ]
    },
  ]
}

 

Vue와 React의 차이점

React의 경우에는 JSX 기반으로 컴포넌트를 작성하고 컴포넌트의 상태를 변화하지 않고 관리한다. 이때, JSX란 JavaScript에서 작동하는 선언적인 XML 유사 문법이다. 변화가 일어나면 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 한다.

 

또한, 컴포넌트를 분리할 때 한 개의 파일에서 새로운 함수형 컴포넌트를 쉽고 깔끔하게 정의해서 만들 수 있다.

 

Vue의 경우에는 단일 파일 컴포넌트 기반의 프레임워크로, 새로운 컴포넌트를 분리하려면 .vue 확장자를 가지는 새로운 파일을 하나 더 만들어야 한다. 이러한 특징 덕에 vue는 러닝커브가 리액트에 비해 낮은 편이라고 할 수 있으며, HTML을 사용한 템플릿 사용으로 문법이 쉬워서 진입장벽이 높지 않다는 특징을 가진다.

 

따라서, Vue의 경우에는 규모가 작고 가벼운 프로젝트를 빠르게 만들거나 속도에 민감한 프로젝트를 만들 때 쓰면 좋고, React의 경우에는 프로젝트 규모가 크고 점점 확장이 필요하고, JavaScript 문법에 능숙하며, 커스터마이징 및 자유도가 높은 개발환경을 선호할 시 사용하면 좋다.