✏️ preview
- framework vs library
- framework : 일정한 형태의 틀, 부품을 가지고 다양한 형태의 결과물을 만들 수 있게 해주는 것. 즉, 특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램.
- library : 소프트웨어를 개발하기 쉽게 어떤 기능을 제공하는 도구들.
Vue.js vs React.js
▪️ 공통점
- Virtual DOM 방식.
- 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거친다. 즉, 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하되기 마련이다.
그런데,
❗️ Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 한다.
- 컴포넌트 기반
- React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성합니다. 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있습니다.
- 가볍고 빠르다!
▪️ 차이점
1. React.js
-
거대한 커뮤니티
페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많다. -
JSX 기반 컴포넌트 구문
템플릿 방식으로 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리한다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 한다. -
템플릿은 재구조화가 어렵고, 에러에 취약하지만, React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합하다.
2. Vue.js
-
단일 파일 컴포넌트(Single File Component)
Vue는 단일 파일 컴포넌트 기반의 프레임워크로, 웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 이러한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있다. -
HTML 기반 템플릿 구문
Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용한다. 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉽다는 특징이 있다.
💡 발췌 및 참고
https://library.gabia.com/contents/8284/
