들어가기에 앞서
이번에 그래도 좀 규모 있는 회사에 들어가게 되었습니다. 5월부터 이력서를 넣고 9월 초에 입사하게 되었습니다. 하지만 입사하게 된 회사는 제가 평소에 사용하던 기술스택인 React기반의 앱이아닌 Vue를 사용하였고, 이에 Vue에 대해 공부를 해야했습니다...
사실 React보다 Vue의 학습곡선이 낮으며, 컴포넌트 기반의 프레임워크이기 때문에 React를 해두면 Vue학습에 도움이 된다는 인식이 강했기 때문에 Vue를 공부할 때 조금 더 수월하게 진행하였던 것 같습니다.
잠시나마 Vue를 공부하며 느꼈던 부분과, 또 React를 사용했을 때와의 비교점 등을 정리해보고자 합니다.
Js 프레임워크의 성장
지금은 Js프레임워크 시장에서 React가 매우 압도적인 형태를 보이고 있습니다. 하지만 React가 처음부터 압도적인 점유율을 보이지는 않았습니다. 사실 이전에 Angular가 1순위로 사용되었습니다.
그런데 문제점이 발생하게 됩니다. Angular는 React나 Vue보다 학습곡선이 높았습니다. 또한 JS에서의 근본적인 문제점이 존재하였습니다. Js의 경우 객체기반의 형식보다는 프로토타입 기반의 함수형 프로그래밍 느낌이 더 강력한 느낌입니다. 그렇다 보니 객체지향보다는 프로토타입 기반, class보다는 함수형 프로그래밍을 더 근간으로 개발을 하는 것을 선호하게 되었습니다. 또한 Js에서의 this의 사용은 Js이외의 개발자들에게 큰 혼동을 가져오게 되었습니다.
&nbps;이러한 문제점을 인식한 React는 16버전부터 기존의 클래스기반의 컴포넌트를 함수형 컴포넌트로 전환하며 Hook을 도입하여 생명주기 관리를 하게되었습니다. 이로 인해 보다 쉽고 직관적인 개발을 할 수 있게 되면서 React는 크게 성장하게 되었습니다.
React와 Vue
대표적인 공통점
-React와 Vue는 Js기반이며 Ts또한 기본적으로 호환이되는 기술 스택입니다.
-프론트엔드 UI를 구성하는 근간이 되는 컴포너트 기반의 SPA어플리케이션 입니다.
-각각 1순위 2순위 JS프레임워크로 큰 생태계 및 커뮤니티를 구성하고 있어 정보가 다양합니다.
-두 기술스택 모두 가상 Dom을 사용하여 Dom의 무거운 동작을 가상 Dom을 이용하여 가볍게 동작하도록 합니다.
라이브러리(React)와 프레임워크(Vue)
이전까지 저는 라이브러리인 React를 사용해 왔었습니다. React를 사용함에 있어서 특이점들이 있었습니다.
-React는 UI적인 요소를 다루기 위한 툴로 그 밖의 시스템을 다루기에는 다른 third Party 라이브러리가 필요합니다.
-이런 third Party 라이브러리에 대한 의존도가 높으며 또한 third Party라이브러리의 종류가 매우 다양하여 Best Practice의 부재가 있습니다.
-React의 점유율은 매우 압도적이기 때문에 생태계가 커 다양한 reference 참조가 가능합니다.
-JSX문법을 사용하여 template을 보여주기 때문에 보다 친숙한 느낌이 있었습니다.
반면 Vue는 위의 React의 특징과 상반되는 느낌을 가져다 줍니다. 프레임워크의 성격이 강하기 때문에 주어진 틀내 에서 데이터 바인딩을 하여 UI를 표시합니다. 그러한 이유로 자유도는 매우 낮지만 reference를 찾아보면 거의 정해진 틀내에 코드적으로 큰 차이를 보여주지 않고 방식 또한 비슷하였습니다.
예를 들어 배열안에 여러 요소들을 반복적으로 나열하여 UI를 표현하고 싶을 때를 가정해 볼 수 있습니다. React에서는 이를 map, forEach 그리고 template안에서 표현할지 밖에서 할지 여부에 대한 자유도가 있습니다. 하지만 Vue의 경우 v-for방식 하나로 규정하여 렌더링하고 있습니다.
const alphabets = ["a","b","c","d"]
//React 대표적인 map
alphabets.map(alphabet => <li>alphabet</li>)
//Vue
<li v-for="alphabet in alphabets">{{ alphabet }}</li>또 한가지 예시가 있습니다. 바로 조건부 렌더링입니다. React에서는 & 연산자, 옵셔널 체이닝, 조건문 등으로 표현하지만 Vue는 v-if/v-else로 간단히 조건부 렌더링을 할 수 있습니다.
const isLoading = false
//React
{isLoading ? <div>Loading....</div> : <div>Not Loading...</div>}
//Vue
<div v-if="isLoading">Loading</div>
<div v-else>Not Loading...</div>
이러한 이유로 Vue로 팀단위 프로젝트를 진행할 때의 스타일 통합과 컨벤션에 대해 시간 비용 소모가 작을 것 같다는 느낌을 받게 되었습니다.
Reference
https://codingapple.com/unit/why-use-vue-over-react/
https://appmaster.io/ko/blog/vuejs-dae-baneung
👍올바른 피드백은 언제든지 환영입니다~!
