Vue vs React

• 라이브러리 vs 프레임워크

	Framework	Library
공통점	다른 사람이 만들어 둔 코드
차이점	다른 사람이 만든 틀(Frame)안으로 들어가서 작업	내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것

Vue는 Framework임

프레임워크는 모든 환경과 도구를 제공해주지만 그것들만 사용해야 함

해당 기술을 새롭게 배워야 함

 

React는 JavaScript 라이브러리임

라이브러리는 하나의 도구를 제공받는 것으로 우리가 원하는 내용 선택할 수 있음

다른 도구들을 기본적으로 제공하지 않아서 개발자가 스스로 선택해서 조합해야 함

---

• 코드 스타일

조건에 따라 Button의 visibility 유뮤를 변경해주는 예제가 있다고 하자.

 

React

//&&연산자 사용
<div>
 {isVisible && <button> 조건에 따라 사라짐</button>}
</div>

//삼항 연산자 사용
<div>
 {isVisible ? <button> 조건에 따라 사라짐</button> : null}
</div>

 

React에서는 && 연산자, 삼항 연산자, if문 등 여러가지 방법을 사용할 수 있음

어떤 것을 사용할 지는 개발자의 선택

장점 - 개발 자유도가 높음

 

Vue

<div>
 <button v-if="isVisible"> 조건에 따라 사라질 버튼</button>
</div>

Vue에서는 v-if라는 한 가지 방법밖에 없음

Vue가 제공해주는 방법을 반드시 사용해야 함

장점 - 코드가 통일성이 있음

---

• 컴포넌트 분리와 재사용

React는 파일별로 컴포넌트 분리 가능

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

(*props란 상위 컴포넌트가 하위 컴포넌트에 값을 전달하는 것)

 

Vue는 컴포넌트를 분리하기 위해 새로운 파일을 하나 더 만들고,

파일에 해당하는 template, script, style 모두 작성

 

프로젝트의 규모가 커질수록 리액트의 이런 특징이 장점이 됨

---

그래서 뭘 선택해야되는데?

규모가 작고 가벼운 프로젝트

JavaScript 문법에 익숙하지 않음

개발자간 코드 통일성을 위한 커뮤니케이션 비용 감소하고 싶음

=> Vue를 추천!

 

프로젝트 규모가 크고 점점 더 커질 예정

JavaScript 문법에 능숙함

컴포넌트를 작은 단위로 나누어 재사용 할 예정

커스터마이징 및 자유도 높은 개발을 선호

=> React 추천!