공통점
- 가상 DOM을 활용한다
- 코어 라이브러리에만 집중하고, 라우팅/전역 관리 등은 외부에 의존한다. (단, 리액트의 context API는 전역 관리를 가능케한다)
- 컴포넌트 기반
차이점
생태계 React > Vue
- 후발주자인 Vue는 필연적으로 React보다 생태계가 좁다. 사용 가능한 외부 모듈이나 커뮤니티의 크기는 아직 리액트에 비할 바가 아니다.
자유도 React > Vue
- Vue는 완전한 프레임워크이며, React는 실제로는 라이브러리이지만 CRA, react-router-dom 등과 함께 프레임워크처럼 사용되는 추세이다. 그럼에도 리액트가 좀 더 자유롭다.
- 상태관리 측면에서 React는 redux, mobx, recoil 이나 react-query, swr 등등 다양한 방법이 있지만 Vue는 주로 vuex를 사용한다.
TypeScript 지원 React > Vue
- React가 압도적이다.
단순 컴포넌트 정의 용이성 React > Vue
- 작은 컴포넌트를 정의하는데 React의 문법이 더 직관적이고, 간결하고, 일관적이다.
개선 방향, 속도 React > Vue
-
React는 Fiber / Fragment / Portal / Context API / Time Slicing / Suspense 등 굵직한 변화가 추가 / 추가 예정이다.
-
Vue는 릴리즈가 상대적으로 느리고, 주로 마이너한 변경 사항 위주인 경우가 많다.
학습곡선 React === Vue
- 둘 다 비슷하다. Vue가 좀 더 쉽다곤 하지만, 큰 의미는 없는 듯
개발 속도 React < Vue
-
일반적으로 Vue가 React보다 빠른 개발이 가능하고, 따라서 스타트업에서 사용하기 좋다고 한다. 하지만 절대적으로 큰 차이는 아니라서, 이후를 생각해 React로 시작한다해서 큰 단점은 없을 듯.
-
자유도에서 언급한 것처럼 React에서 사용할 수 있는 외부 모듈이 더 다양하기 때문에, 사용에 능숙해진 상태라면 오히려 React가 더 빠를 수도 있다.
렌더링 성능 React < Vue
-
렌더링 성능의 핵심은 DOM 조작 관련 작업을 최소화하는 것이다. 이는 DOM 조작 수 자체를 최소화하거나, DOM 조작을 할 때 최소한의 오버헤드만 가하는 것이다.
-
첫 번째 DOM 조작 수 최소화는 둘 다 가상돔을 사용하기에 큰 차이가 없다.
-
하지만 같은 조건의 DOM 조작시 최소한의 오버헤드 측면에서 Vue의 가상돔이 훨씬 가볍다.
상태 갱신 성능 React < Vue
-
React는 상태가 변경되면 해당 컴포넌트부터 이하 자식 컴포넌트를 포함하는 트리를 다시 렌더링한다. 이는 개발자가 직접 최적화할 수는 있지만, 기본적으로는 성능면에서 좋지 않다.
-
Vue는 렌더링 중 컴포넌트의 종속성이 자동 추적되기 때문에 시스템은 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고있다.
-
따라서 최적화 되지 않은 조건에서도 Vue가 더 빠르고, 심지어 최적화된 React보다 기본 Vue가 더 빠르다.
vue 공식문서를 기반으로 작성해서 vue에 좀 더 편향되어 비교된 거 같다. 이후 react vs vue 관련해서 더 알게되면 추가해야겠다.
참고
