선 React, 후 Vue
React vs Vue
코린이가 바라본 그 스택의 세상(그스세)
가고 싶은 회사에서 Vue를 사용하고 있다. 그래서 React를 배운 나는 Vue에 대해 알아보고 싶어 제로초님의 강의를 들었다. Vue 공식문서가 React 공식문서처럼 한글 번역이 잘 되어 있어 보기 편하지만, 짧은 시간 내에 이해하기엔 코드 작성하며 결과물을 보는 것이 더 좋을 것이라 생각이 들었고, 제로초님은 React, Vue 둘 다를 사용하시는 프리랜서분이시라 중간중간 React와 비교해주어서 이해하기 더 좋았다.
React를 처음 접했을 때의 기억이 난다. React는 HTML, JavaScript를 한 페이지에 같이 쓸 수 있어 느슨한 분리를 했고, 데이터 관리가 수월하여 DOM사용이 아주 적었다. CSS를 Styled-components(CSS in JS)로 구현한다면 HTML, CSS 두 기능을 모두 JavaScript로 만들 수 있게 된다. => 함수로 HTML, CSS, JavaScript 모두 표현 (React로 만든 Accordion)
Vue는 알아본 지 일주일도 되지 않아 지금이 처음이라고 말할 수 있다. React처럼 한 페이지에 HTML, CSS, JavaScript를 다 사용할 수 있지만 <template><script><style>로 영역을 분리한다. => 분리된 영역에서 각각의 특성을 살리면서 연동 (Vue로 만든 Accordion)
공식문서 정의
React 공식문서 — 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
Vue 공식문서 — 진보적인 JavaScript 프레임워크
라이브러리 vs 프레임워크
공식문서 정의에 따르면 React는 라이브러리, Vue는 프레임워크라고 적혀있다. 라이브러리는 ‘단순 활용가능한 도구들의 집합’을, 프레임워크는 ‘뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술’이다. 다르게 말하면 라이브러리는 ‘사용자가 전체적인 흐름을 만들며 도구를 가져다 쓰는 것’, 프레임워크는 ‘전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣는 것’으로 비교할 수 있으며 ‘제어 흐름에 대한 주도성이 누구에게/어디에 있는가’의 차이이다.
그렇기에 React는 더 복잡한 것을 구현하려면 개발자가 직접 해야하고, Vue는 이미 다 갖춰져 있기 때문에 사용하기 편하다.
React보다 Vue가 더 좋은가?
프로그램 외적으로 Vue보다 React 커뮤니티가 많고 사용하는 회사도 많고, 그럼으로 배우는 학생들도 많다. React 배우는 것이 더 어렵기 때문에 React 다음 Vue를 배우는 것이 상대적으로 쉽다고도 한다.
그러니깐 둘 다 배우는 것이 좋다! 일부 회사는 두 개를 모두 사용하기도 한다고 한다. (대표적인 예, 카카오)
여기서 잠깐! 나처럼 React를 먼저 접해서 배우는 사람이 많을 것 같아 Vue에 대한 장점을 적어보고자 한다. Vue가 React보다 쉽다고 했지만 어떻게, 왜 쉬운 지는 잘 모를 수 있기 때문이다.
Vue의 장점
1. React와 똑같은 결과물을 만든다.
2. 코드짤 때 right way가 있다. (여러개 만드는 방법은 React에선 map, forEach, for in, for of, for 등 많다면, Vue는 v-for로 정해져 있다.) => 협업할 때, 코드 스타일이 통일되어 좋다.
3. React처럼 JSX, render(), function도 가능하다 (그러나 잘 쓸지는..?)
4. HTML 렌더링이 React보다 조금 더 빠르다 (㎳차이)
내가 가고자 하는 회사가 데이터 관리, 모니터링 관리 시스템 작업을 해서 실시간 데이터가 중요하고, 여러 사람들이 같이 확인하는 것이다보니 Vue를 사용하는 것 같다.
마무리로 Vue의 장점을 소개했지만, 나는 React도 꾸준히 배울 예정이다. 특히 React Native에 빠졌기 때문에..! 욕심이 많기 때문에 Vue도 배우고, React도 배우고 모두 열심히 하고 싶다 :)
참고자료
- [Framework Vs Library](https://webclub.tistory.com/458)
- [카카오가 리액트냅두고 Vue 쓰는 이유] (https://youtu.be/-tVaahsXpwk)
- [웹 게임을 만들며 배우는 Vue](https://www.inflearn.com/course/web-game-vue/dashboard)
