[FE] Vue vs React

Vue : The Progressive JavaScript Framework

React : The library for web and native user interfaces

프레임워크

프레임워크와 라이브러리 모두 개발의 편의를 위해서 제공하는 미리 작성되어진 코드

 

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대

기본적인 구조를 제공하고 이런 구조 위에서 사용자가 코드를 작성하여 개발

서버의 구동, 메모리 관리, 이벤트 루프 등의 부분을 프레임워크가 관리하고,

사용자는 프레임워크의 정해진 규칙 안에서 개발 => 제어 흐름을 프레임워크가 가지고 있다

라이브러리

특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 불러와서 활용 가능한 도구

정해진 규칙이 없고 프레임워크에 비해서 개발이 자유롭다

라이브러리를 사용할 때 사용자는 코드의 흐름을 직접 제어

=> 개발 시 필요한 기능이 있는 경우 능동적으로 라이브러리를 호출하여 사용

React도 프레임워크라던데?

프레임워크처럼 동작하기도 함

=> 리액트가 개발자가 만든 컴포넌트를 불러서 사용하니까

하지만 다른 프레임워크들과는 달리 오직 view만 담당하고 그만큼 내장되어 있는 기능이 부족해서 다른 라이브러리를 불러와서 사용

사용자가 불러와서 사용하고 리액트가 사용자에게 강제하는 규칙이 없으니까 라이브러리라고 봐야 해

자유도가 높은 React와 한가지 방식으로만 작성 하는 Vue

왜 React가 더 자유도가 높을까?

ex) 배열을 돌면서 리스트를 랜더링 할 경우

• React는 JS의 문법 map을 사용하거나 forEach, for문 같이 여러 방식중에 개발자가 한가지를 선택해서 구현
• Vue는 v-for문으로만 구현 가능

React는 자유도가 높아서 협업시에 코딩 스타일을 통일하는데 커뮤니케이션 비용이 든다

컴포넌트 분리와 재사용

React는 함수형 컴포넌트를 생성해서 파일별로 컴포넌트 분리가 가능

props형태로 전달하거나 다른 곳에서 재사용이 쉬움

 

Vue는 새로운 컴포넌트 생성을 위해서는 반드시 새로운 파일을 하나 더 생성해야 함

props를 전달하는 과정에서 해당 컴포넌트를 사용하는 모든 파일에 작성해주어야 한다

 

컴포넌트를 작은 단위로 분리하고 재사용 하는 프로세스는 React가 더 효율성이 높다

진입장벽

React는 전부 자바스크립트로 이루어져있다

jsx라고 불리는 html 역할을 하는 코드도 JS의 확장된 문법이고 css도 파일 안에서 사용하려면 css-in-js를 사용

자바스크립트를 모르면 개발이 어려워

 

반면에 Vue는 Vue에서 제공해 주는 문법만 잘 배우면 동작 => 생산성이 좋아

문법도 비교적 쉬운 편

그럼 React를 왜 사용하는데?

• TypeScript와 결합력이 좋음
• 아직까지 FE 변화를 선두한다고 할 수 있다
• React의 월등한 사용량으로 인한 시장 크기 차이

---

데이터 바인딩 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것