brunch

매거진 5mm 개발공부

라이킷 13 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 홍기린 Feb 12. 2024

다음 프로젝트, Vue3와 React 중 뭘로 할까

Vue3와 React 비교 검토하기

프론트엔드 개발자로 일을 한 지 4년 차에 접어들었다. 그동안 작업했던 프로젝트들은 모두 Vue2였다. 내 경력의 대부분은 Vue2와 같은 Vue계열인 Nuxt2로 작업한 프로젝트였다. 하지만 이제는 헤어져야 할 시간이다... Vue팀도 2023년 말에 Vue2가 종료됨을 넌지시 이야기했다. 같이 쓰던 Vuetify 라이브러리도 훠얼씬 전에 버전3가 나왔다. 난 참 오래도 버텼다. ㅠ

중간중간에 React를 만나는 시간도 있었다. 개인 홈페이지를 구축해야 할 필요성을 느껴서 스터디도 할 겸 리액트와 amplify로 개인 홈피를 개발했다. 직관적인 Vue에 비해 리액트의 JSX 문법은 익숙해지는 데 시간이 필요했다. 개인 홈페이지라서 다른 프로젝트들처럼 엄청 복잡한 구현을 해볼 순 없었지만 React 맛보기 체험을 할 수 있었다. 꽤 흥미로운 경험이었다.

이제, 다음 프로젝트가 시작된다. 어떤 프레임워크로 프로젝트를 시작할지 결정해야 하는 지점이다. Vue3로 할 것인가 리액트로 할 것인가... 고민이 시작되었다. 마치, 평양냉면 먹을래 일반(함흥) 냉면 먹을래 하는 것 같다. 남들도 많이 먹고 다양한 맛의 옵션이 있는 함흥냉면을 먹을지, 마이너 하지만 순수한 평양냉면을 먹을지.... 둘 다 맛있단 말이지. 흠.

그래서 Vue3와 React를 본격적으로 비교해 보았다. 여러 블로그의 글들과 공식문서를 참고했다.

내 기준에 비교적 승리에 가까운 항목을 연두색으로 칠해보았다.

Vue나 React 중 어느 것이 더 "좋다" 거나 "우월하다"라고 할 수 없었다. 처음 이 정리를 시작할 때는 어느 한쪽의 승자가 있을 거라고 생각했는데, 막상 정보를 수집하다 보니 특출 난 승자는 없었다. 결국 취향의 차이인가...? ~~평냉이냐 함냉이냐.~~

Vue vs React

나름대로 인사이트를 정리해 보았다.

1. React의 강점은 높은 인기와 방대한 생태계이다. 수천 개의 무료 도구, 라이브러리 및 리소스를 자유롭게 활용할 수 있다. 따라서 풍부한 기능이 많이 필요한 대규모의 프로젝트를 해야 할 땐 React가 유용할 것 같다.

2. Vue는 종합선물세트다. 많은 기능이 탑재되어 있고, 정해져 있다. 이는 곧 장점이자 단점이다. 고민할 필요가 없는 반면 자유도는 떨어진다. 하지만 그 기능들은 꽤 유용하며 사용하기에 편리하다. 만약 React에서 Vue에 기본 내장된 기능을 구현하려면 여러 개의 추가 라이브러리를 설치해야 한다.

3. 현재 구직 중이라면, React는 선택이 아닌 필수이다. Vue에 비해 취업시장의 규모가 7배 정도 크다.

4. 만약 구직 중이 아니라, 중소규모의 프로젝트를 시작하려는 사람이라면 현재 자신에게 친숙한 프레임워크를 사용하는 것이 좋은 방법이다. 그게 React이든 Vue이든 크게 상관이 없다.

5. Vue가 쉽다는 건 "쉽다"는 뜻으로 이해하기보다는 "직관적이다"라는 뜻이 더 알맞은 것 같다. v-for나 v-if처럼 기존 html만 알아도 직관적으로 이해할 수 있는 문법들이 많고, template도 html 문법 그대로 사용하기 때문에 직관적이고 그래서 진입 허들이 낮은 것이다. 흔히들 말하는 Vue는 초보자용, React는 중급자용이라는 표현은 적절하진 않다.

그래서 나의 선택은...?

최종 선택까지는 아니지만, 잠정적으로 Vue3를 더 깊이 알아보려고 한다. 그 이유는,

1. 지금 투입되는 프로젝트의 규모는 중소 규모이며, 복잡한 기능이 없다.

2. 나의 현 상태를 반영해 보았을 때 Vue3를 배우는 러닝커브가 React를 배우는 것보다 짧을 것이다.

3. 협업 시에 Vue를 모르는 사람과 협업하게 되더라도 Vue는 진입장벽이 낮아서 큰 문제가 없을 것이다.

예전에 진행했었던 Vue2의 프로젝트를 새로운 vue3라는 그릇에 새롭게 부어보는 연습을 해보려고 한다. 그리고 만약 시간 여유가 더 있으면 React로도 동시에 부어보는 연습을 해보려고 한다. (but 시간 없으면 리액트는 패스)

그래도 뭔가 점을 찍고 나니 마음이 후련하다.

하지만 결국엔.....

..... 언젠간 Vue3와 React 둘 다 하게 되지 않겠는가 ㅋㅋㅋ 프론트엔드의 숙명이란...

ㅋㅋㅋㅋ 플러터도 해야대는뎅...

....생각과 고민은 여기까지 하고 일단 해보기로 ;)

*** 2024.7.23 업데이트

지금은 React를 적극적으로 활용하고 있는 중이다.(ㅋㅋ..) 이 글을 쓴 후에 ChatGPT과 코파일럿을 적극적으로 쓰면서 생각이 조금 바뀌었다. AI는 기존의 code들의 pool이 얼마나 많은지에 따라 깊은 답변을 기대하기 쉽다. 리액트는 pool이 넓다. GPT를 쓰다보니 vue의 대답보다 react의 답변이 더 풍부한 느낌을 받았다. 방대한 커뮤니티는 그만큼 힘이 있다.

그리고 vue를 이미 경험한 상태에서 react를 배울때 AI의 도움을 받으니 러닝 허들이 매우 낮아졌다. 나처럼 어느 한쪽을 깊이 경험한 후에는 사실 어떤 프레임워크를 써도 비교적 자유롭게 선택할 수 있을 것이다. 하지만 프론트엔드 프레임워크를 처음 배우는 사람이라면 일단 한가지를 깊게 파보는 걸 추천한다. vue도 초보가 경험하기에 괜찮은 선택이다. 그리고 개발공부를 계속 하다 보면 프론트엔드의 기본적인 디자인 패턴은 비슷하다. 공부를 하는 사람이라면 1개를 깊이 파는걸 추천한다. 하지만 취업을 준비로 공부를 하는 사람이라면 리액트로 가시길.

*** 2024.11.22 업데이트

이제 NextJS15가 나왔다.그리고 React 팀에서는 NextJs를 강력히 밀어붙이고 있다. React는 단순 라이브러리일 뿐이라며, 프레임워크인 NextJS를 쓰라고 공식 홈페이지에서 권하고 있다. 그리고 최근에 다시 기회가 있어서 Vue3로 작업해보았는데 아무리봐도 React와 닮아버렸다. Vue만의 개성을 잃어버려서 좀 아쉽다. 사실 나는 Vue2일때가 더 좋았다고 생각한다. 그때가 더 뭔가 쉽고 간단한 프레임워크라는 느낌이 강했다. 그래서 Vue3를 쓸바에는 NextJS를 배우는게 낫지 않나, 라는 나의 요즘 생각을 덧붙여본다.

*** 현업에 계신 분들의 의견 환영합니다. ~~멀 모르는 소리, 이게 백배는 낫다!! 라고~~ 자신있게 말해주시는 분 환영합니다........

참고글

- https://medium.com/@zero86/번역-react-js-vs-vue-js-in-2023-5118ae2e1454

- https://jelvix.com/blog/js-frameworks-is-vuejs-better-than-react

- https://itchallenger.tistory.com/732

- https://velog.io/@eunbinn/react-i-love-you-but-youre-bringing-me-down

- https://brunch.co.kr/@jowlee/128

- https://velog.io/@heonys/Vue-React-관점에서-Vue3-바라보기

- https://www.youtube.com/watch?v=Jk0smQXxd9k

- https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88

- https://velog.io/@winterlood/React가-처음인-당신-Ep1.-탄생편

- https://www.appsdevpro.com/blog/vue-vs-react/