해당 글은 원글 작성자분에게 허락을 받아, 작성됨을 미리 알려드립니다.
Vue 와 React 는 모두 웹 애플리케이션을 구축하는데 사용할 수 있는 프론트엔드 기술 스택입니다. 둘 중 하나를 선택하는 것은 프로젝트에 성격 또는 요구사항에 달려 있습니다.
State Management 부분에만 내용을 추가합니다.
Vue 진영에서는 Vuex, Pinia
React 진영에서는 Redux, Recoil 등이 존재합니다.
Developer tools 부분에서 Vue 진영에서는 Vite 이라는 도구를 지원합니다.(물론, React 프로젝트 생성도 가능합니다.)
Vue 는 사용 편의성과 개발자 커뮤니티의 증가로 인해 2023년에도 인기와 채택이 계속 증가할 것으로 보입니다. 일반적으로 React 에 비해 렌더링 속도가 빠르고 효율적인 것으로 간주되므로 중소규모(small or medium) 애플리케이션에 적합합니다.
반면에 React 는 크고 활동적인 커뮤니티를 가지고 있어 대규모 애플리케이션을 구축하는 데 널리 사용되고 있습니다. Vue 에 비해 초보자를 위한 학습 곡선이 가파르지만 플러그인 및 라이브러리의 방대한 생태계가 강력한 프레임워크를 만듭니다.
Vue
- 장점
- 학습이 쉽고, 사용하기 쉽습니다.
Vue 는 다른 프론트엔드 기술스택에 비해 상대적으로 낮은 학습곡선을 가지고 있어 개발자들이 빠르게 학습하여 구축이 가능합니다. - 양방향 데이터 바인딩(Two-way binding)
Vue 는 양방향 데이터 바인딩을 제공하여 애플리케이션 전체에서 데이터 및 상태를 보다 쉽게 관리할 수 있습니다.
v-model 지시어를 사용하여 작성하며, form 관련 태그에만 사용이 가능합니다. v-model 의 본질은 이벤트에 대한 데이터 업데이트를 하기 위한 구문 설탕(sugar syntax)입니다.
v-on / v-bind 를 축약 - 확장성
Vue 는 중소규모 애플리케이션에 적합합니다. - Vue CLI 및 DevTools
Vue 는 사용하기 쉬운 CLI 및 DevTools 를 제공하여 애플리케이션을 쉽게 개발, 디버그 및 테스트가 가능합니다.
- 단점
- 크지않은 생태계
Vue 는 플러그인과 라이브러리의 생태계가 성장하고 있으나, React 와 비교하면 여전히 작습니다. - 단방향 데이터 바인딩(One-way binding)
양방향 데이터 바인딩은 Vue 의 강점이지만, 단방향 데이터 바인딩은 특정 상황에서 제한이 될 수 있습니다. - 덜 성숙함
Vue 는 React 와 비교하여 새로운 프레임워크이며, 이는 React 만큼 널리 채택되거나 테스트되지 않을 수 있음을 의미합니다.
React
- 장점
- 대규모 커뮤니티 및 생태계
React 는 플러그인 및 라이브러리의 방대한 생태계를 보유하고 있으며 대규모 커뮤니티를 차지하고 있습니다. - 성능
React 는 성능이 우수하며 소규모 및 대규모 애플리케이션 모두에 적합합니다. - 확장성
React 는 확장성이 뛰어나고 복잡한 애플리케이션을 쉽게 처리가 가능합니다. - React-Native
React 는 RN 을 사용하여 네이티브 모바일 애플리케이션 개발이 가능하도록 해줍니다. - Server-side rendering
React 는 서버사이드 렌더링을 허용하여 성능과 SEO 를 향상시킵니다.
- 단점
- 가파른 학습곡선
React 는 다른 프론트엔드 기술스택에 비해 가파른 학습곡선을 가지고 있으며, 이는 일부 개발자들에게 장벽이 될 수 있습니다. - JSX 기반 템플릿
React 는 JSX 기반 템플릿을 사용하므로 개발자가 익숙해지려면 시간이 걸릴 수 있습니다. - Boilerplate code
React 는 Vue 에 비해 반복되는 코드가 더 많이 필요하므로 개발 시간이 더 소요 될 수 있습니다.
전체적으로, Vue 와 React 모두 장단점이 있으며, 두 가지 중 선택은 프로젝트의 구체적인 요구 사항에 따라 달라질 것입니다. Vue 는 빠르고 효율적인 렌더링이 필요한 중소규모 애플리케이션에 적합한 반면, React 는 플러그인 및 라이브러리의 방대한 에코시스템과 강력한 성능이 필요한 소규모 및 대규모 애플리케이션에 모두 적합합니다.
번역을 하면서, ? 스러운 부분
- Vue 는 덜 성숙하다 부분
React 는 2013.05.29 일에 처음 세상에 등장했습니다.
Vue 는 2014.02 월에 처음 세상에 등장했습니다.
Vue 는 개인적으로 충분히 성숙한 UI 라이브러리라고 생각합니다. Vue2 에 대한 지원도 2023년 12월 31일까지 수정 및 업데이트를 지원해주기도 하고, Vue2 에서 Vue3 에 대한 마이그레이션 부분도 문서로 제공을 해주고 있습니다. 그리고 무엇보다 Vue3 로 넘어오면서 Composition API 및 TS 지원 등에 부족한 부분들을 채워서 출시하였습니다.(Vue3 첫 출시 일명 원피스가 2020.09.18일)
- 단방향 데이터 바인딩
어떠한 특정 상황인지에 대해서, 알 수 있는 부분이 없었습니다.
개인적으로 문법적 설탕인걸 모른다면 해당 코드에 대한 이슈 발생 시, 시간을 허비할 수도 있겠구나라는 생각은 들었습니다.
- 확장성
Vue 및 React 둘다 소규모든 대규모든 확장성이 있다고 생각을 합니다.
둘다 컴포넌트 기반으로 UI 를 구성해나가기 때문에 아토믹 디자인 패턴 적용도 가능하며, 컴포넌트가 하나의 책임만을 가지도록 하여 재사용성을 높일수도 있습니다.
이러한 확장성을 생각하려면 무엇보다 잘 설계하는 원칙을 가져야합니다.(설계를 이상하게 했다면, 개발 부채가 쌓여서 리팩토링 하다가 으앙 죽음)
- Server-side rendering
Vue 및 React 를 사용한다고 해서 바로 서버사이드 렌더링이 가능한것은 아닙니다. 보통은 해당 진영에서 Nuxt 또는 Next 를 사용하여 이러한 부분을 처리합니다.(직접 구현하려면 많은 시간이 필요하므로..)
- JSX 기반 템플릿
이부분은 단점보다는, 장점으로 생각하는게 더 맞을거 같습니다. JavaScript 를 통해서 React Element 를 쉽게 작성하고 이벤트 바인딩 및 데이터 바인딩이 가능하기 때문입니다. + 직접 JSX 에 HTML 태그를 작성이 가능하므로 가독성이 좋습니다.
React.createElement(“h1”, null, “Hello, GodDaeHee!”);
그렇지 않다면, 위와 같은 코드를 열심히 적으셔야합니다.
Vue 와 React 를 둘다 해본 입장에서
- Vue 와 React 를 비교하면, React 개발이 숙련되는데 조금 더 시간이 필요함.
- Vue 는 React 와 비교해서 좀 더 쉬운 인터페이스 및 유연성을 제공.
- 인기도와 커뮤니티는 확실히 React 가 짱짱맨.
- Vue 에서는 emit 을 통해서 이벤트를 상위 컴포넌트에게 발생시키게 하는 반면, React 는 하위 컴포넌트에 이벤트 함수를 내려준다.
- Vue 도 JSX 를 원한다면 사용이 가능하다. 하지만, SFC(*.vue) 파일을 확인해보면 JSX 를 배울 필요가 없다.(template 영역에 작성하고 바인딩 해주면 된다.)
- Vue 및 React 둘다 안정적이다.(하지만 기업에서 지원하는거와 개인이 후원받으면서 하는거에서 어떤 조직 또는 주체가 해당 프로젝트를 이끄냐도 중요한 부분이다.)
- Vue 과 React 에 비해 번들 사이즈가 작다. 이는 부트스트랩 단계에서 Vue 과 React 보다 빠르게 실행된다는 의미다.
큰 조직에서는, 프론트엔드 팀마다 다르게 쓰는 경우도 있습니다.(네이버, 카카오에서 Vue, React 섞어 씁니다)
하지만 국내 취업은 React 이니.. 모두들 React 열심히 합시다 :)
