Vue에서 React로 전향하기
구직 시장에서 뭐가 더 유리한가
최근 회사 내에서 앞으로 개발되는 신규 프로젝트들은 React로 개발을 진행하게 되어서 관련 정보들을 리서치하게 되었습니다. 기존 프로젝트들은 Vue를 사용하여 개발되었는데 굳이 잘 쓰던 언어들을 버리면서 까지 React로 바꿔나가 야만 하는 이유를 생각해 볼 겸 이 글에 적으려 합니다.
React와 Vue 비교
공통점
1. 컴포넌트(Component) 기반
- React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성되어 있습니다. 재사용성이 높고 컴포넌트 캡슐화와 확장이 용이해 개발이 유연해지는 장점이 있습니다.
2. 가상 DOM(Virtual DOM) 방식
- 가상 DOM은 실제 DOM의 변화를 최소화시켜주는 역할을 합니다.
브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. COM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정 역시 20회 다시 이루어집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.
가상 DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 가상 DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한 번의 렌더링 과정만 거치게 됩니다.
React와 Vue 모두 가상 DOM 방식을 통해 성능을 향상합니다.
차이점
1. 단일 파일 컴포넌트 vs JSX기반 컴포넌트
- Vue는 단일 파일 컴포넌트(Single File Component) 기반의 프레임워크입니다. 웹의 뷰(view)를 구정하는 요소인 HTML, CSS, Javascript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식입니다. 이러한 관리방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있습니다.
- React는 JSX코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리합니다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 가상 DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트합니다.
2. HTML 기반 템플릿 구문
- Vue는 개발한 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링 하는 과정에 템플릿이랑 문법을 사용합니다. 이 템플릿을 구성하는 문법이 HTML 기반으로 이루어져 있어 배우기 쉽습니다.
- 템플릿은 재구조화가 어렵고 에러에 취약한 점이 있지만 React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합합니다.
3. 인기 및 커뮤니티
- 페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 커뮤니티의 크기가 크기 때문에 더 많은 리소스, 서드파티 도구등 다양한 레퍼런스, 확장 라이브러리가 많습니다. 또한 이미 React를 사용하고 있는 개발 프로젝트가 많기 때문에 개발자 채용 시, React를 다룰 줄 안다는 것이 장점으로 작용할 수 있습니다.
stackoverflow 2023 인기 있는 웹 프레임워크 및 기술4. 데이터 흐름
- React는 데이터 흐름이 단방향으로 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흘러갑니다. 자식컴포넌트의 데이터를 부모컴포넌트에서 사용하기 위해 redux, recoil과 같은 상태관리가 필요하거나, 전역 hook을 이용하여 값을 dispatch 해야 합니다.
- Vue의 데이터 흐름은 양방향으로 화면에 표시되는 값이 프레임워크 모델 데이터 값과 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경됩니다.
5. 학습 난이도
- React는 순수 Javascript 다루는 능력에 따라 더욱이 잘 다루며 JSX와 같은 새로운 개념은 이제 막 시작한 사람들에게는 다소 어려울 수 있으며, React의 생태계와 작업 방식을 익히는데 시간이 걸립니다.
- Vue는 간결한 문서화와 직관적인 API 디자인으로 HTML, CSS 및 Javascript에 익숙한 개발자라면 쉽게 익히고 적용할 수 있습니다.
상황에 따라 더욱 적합한 언어가 있을 테지만 현재로서는 어떤 프레임워크가 더 적합한지는 아직은 잘 모르겠습니다. 각각의 장단점이 있지만 상황에 따라 고려해야 하는 부분이 다를 테니까요.
하지만 구직 시장에서의 React 지분은 무시할 수 없을 만큼 많은 부분을 차지하고 있는 것 같습니다
[참고] https://library.gabia.com/contents/8284/
