React vs Vue.js

면접에서 리액트와 뷰를 비교하는 질문이 많이 들어옵니다.

개인적으로 느낀 차이점들과 다른 정보들을 정리해봤습니다.

(뇌피셜이 많이 들어 있으므로, 팩트 체크가 필요합니다..)

 

1. 리액트는 JS로 모든 것을 구현할 수 있지만, 뷰는 기본적으로 마크업과 스타일, 스크립트를 써야 한다.

리액트는 JSX와 styled-components과 같은 외부 라이브러리를 이용해서 js로 마크업과 스타일을 구현할 수 있다.

하지만 뷰는 기본적으로 템플릿 언어이기 때문에, HTML로 마크업을, js로 스크립트를, css로 스타일을 구현해야 한다. (물론 JSX문법도 지원한다.)

이 부분은 취향 차이겠지만, 고전적인 HTML CSS JS를 배운 초보자들에겐 뷰가 더 익숙할 듯 하다.

 

2. 둘 다 가상 DOM을 사용한다.

뷰같은 경우엔 확실하게 MVVM 패턴으로 구현되어 있는데, 리액트는 따로 명시한 걸 본적이 없다. 가상 DOM을 쓰는 걸 보면, 아마 MVVM이 맞을 거 같다.

 

3. 일반적인 경우, 뷰가 더 빠르다.

최적화된 리액트 > 최적화되지 않은 뷰 > 최적화되지 않은 리액트 (왼쪽이 빠름, 오른쪽이 느림) 이라고 한다.

자세한 것은 Vue.js 공식 홈페이지의 다른 프레임워크와의 비교 글을 참고.

 

4. 리액트의 클래스 컴포넌트는 this를 사용한다는 점에서 뷰와 비슷하다.

this를 이용해 props와 state(data)에 접근하는 방식이 유사하다. 이는 개발자로 하여금 JS를 더 깊게 배우게 만들고, 러닝커브가 심해진다.

나는 리액트의 함수 컴포넌트와 hook이 더 직관적이고 실수할 확률이 적다고 생각한다. (리액트 공식 문서에도 this에 대한 언급이 있다.)

 

5. 커뮤니티 크기는 리액트 > 뷰

그러나 요즘 뷰 점유율이 리액트를 따라잡고 있다는 얘기를 들었다. 아마 니콜라스님 유투브에서 본듯?

 

6. 공식 레퍼런스의 친절도는 리액트 < 뷰

초창기부터 한글 번역이 지원되었고, 공식 문서의 가이드가 자세하고 따라가기 쉽게 쓰여져 있다. 심지어 각 항목마다 대부분 프리뷰도 있어, 바로 눈으로 확인이 가능해서 더욱 좋다.

리액트도 한글 지원은 되지만, 함수 시그니쳐와 프리뷰 같은 소소한 부분에서 디테일이 부족한듯..

 

7. 양방향 데이터 바인딩은 뷰가 더 편하다. 하지만 안정성은 리액트 > 뷰

뷰는 v-model을 이용해 dom 객체의 value와 data를 양방향 동기화 할 수 있다. 즉, 브라우저에서 텍스트 필드에 값을 입력하면 컴포넌트의 data가 바뀌며, 역도 된다는 것.

그러나 리액트는 양방향 바인딩을 하려면 이벤트 핸들러를 등록하여 state를 갱신해야 한다. 안정성에서는 리액트가 더 좋은 듯.

 

8. 리액트는 immutable, 뷰는 mutable

컴포넌트의 상태를 갱신하기 위해서, 리액트는 특정 함수를 통해 항상 새로운 객체 혹은 값을 덮어씌워줘야 한다. 즉 불변성을 지킨다. 함수는 값으로 평가되므로 편하게 다른 컴포넌트에게 전달할 수 있다. 이 것은 소소한 장점인듯?

그러나 뷰는 this.data의 속성에 값을 재할당하면 되며, 알아서 이전 상태와 병합을 한다. 즉, 가변성이 있다.

리액트가 특정 함수를 이용해 상태를 갱신하는 이유는 다른 생명주기 함수의 트리거 유무를 간단하게 알기 위해서라고.. 이런 면에서는 리액트가 더 좋은 듯.

 

9. props나 state에 의존하는 스타일 작성엔 리액트가 유리하다

styled-components는 컴포넌트의 props를 받아서 간단한 분기처리가 가능하다. 뷰도 가능한가? 뷰 안한지 좀 되서 잘 모르겠다.

 

10. 둘 다 컴포넌트 기반 개발이 가능하다.

웹 페이지를 작은 단위로 쪼개고, 그것을 조합하여 페이지를 구성하는 컴포넌트 기반 개발이 가능하며, 이로 인해 재사용성이 높다.

 

11. 둘 다 DOM조작을 최소화 할 수 있다.

리액트는 JSX를, 뷰는 html섹션을 통해 컴포넌트를 원하는 위치에 편하게 삽입할 수 있다.

 

12. flux 기반 상태관리 라이브러리가 있다.

리액트는 redux와 mobx, 뷰는 vuex.

리액트의 경우, 중앙집중형 상태 저장소(store)가 싫다면(즉, 일부 범위에서만 데이터를 공유하고 싶다면) context를 사용할 수 있다.

 

13. 컴포넌트에 props나 속성을 줄 때는 리액트가 직관적이다.

리액트는 컴포넌트에 속성을 추가할 때 스트링 리터럴 혹은 브라켓으로 묶어서 표현할 수 있다.

그러나 뷰는 무조건 스트링 리터럴로 표현해야 한다. 이로 인해 리터럴 값과 아닌 값을 쉽게 구분하기 힘들다.

 

14. 부모 자식 간 데이터 및 함수 공유

리액트는 값(JS는 함수도 값으로 평가한다)을 props로 자식에게 넘겨주면 된다.

만약 자식이 부모의 상태를 변경하고 싶다면 부모가 자식에게 클로저를 이용한 함수를 넘겨주면 된다. 하지만 뷰는 이벤트 에미터를 이용해 이벤트를 트리거해야 한다.

딱히 둘 중에 뭐가 더 나은지는 잘 모르겠다. 아마 복잡한 의존성 관계라면 구독/발행 패턴인 이벤트 에미터가 더 유지보수하기 쉬울 듯?

 

참고

https://medium.com/@erwinousy/%EB%82%9C-react%EC%99%80-vue%EC%97%90%EC%84%9C-%EC%99%84%EC%A0%84%ED%9E%88-%EA%B0%99%EC%9D%80-%EC%95%B1%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EB%8B%A4-%EC%9D%B4%EA%B2%83%EC%9D%80-%EA%B7%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%B4%EB%8B%A4-5cffcbfe287f

React와 Vue에서 똑같은 앱을 만들어보고 그 차이점에 대해 썼다.(번역글)

https://kr.vuejs.org/v2/guide/comparison.html

다른 프레임워크와의 비교 — Vue.js