Vue(혹은 React)가 jQuery 와 비교했을 때 어떤 장점이 있나요?

Question

기존에 JavaScript 는 jQuery 만 사용하다가 프론트엔드 개발을 더 하고싶어서 찾아보고 있습니다.

Vue.js 가 어떤 점에서 더 좋은지 궁금하네요.

Vue.js 를 사용하시는 현업 개발자님들의 답변을 듣고싶었습니다.

아 그리고~ 제가 아직 많이 부족한데요.

프론트엔드 기술 공부를 하는데 어떻게 하면 좋을지 조언도 부탁드립니다!

추운데 감기 조심하시고요. 감사합니다~~

Answer 1

안녕하세요 질문자님!

저는 개인적으로 리액트를 사용해봐서 리액트 위주로 말씀드리겠습니다. 다른 분이 vue.js와도 비교해주시면 좋겠네요^^

일단 리액트는 지속적으로 데이터가 변화하는 대규모의 웹 앱을 만들때 제이쿼리보다 성능이 좋습니다.

제이쿼리의 경우 데이터가 변화할 때 dom 구조 내 html 요소에 직접 접근해서 뷰를 바꾸는데요. 리액트를 사용하면 뷰를 아예 날려버리고 변화를 적용하게 됩니다. 리액트가 각각의 컴포넌트로 이루어져있고, 렌더링을 하기 때문인데요. 이해하기 쉽게 말씀드리자면 결과적으로 대규모 웹앱에선 성능이 더 좋아집니다.

이러한 이유로 스택 오버플로우 질문 개수로만 봐도 2016-7년을 기점으로 리액트가 매우 인기가 많아졌습니다.

Answer 2

Vue.js를 사용하게 되면 컴포넌트 단위로 개발이 가능하기 때문에 재사용성이 높아집니다.

또한 데이터 바인딩을 통해서 도큐먼트에 접근하지 않고도 데이터를 화면에 보여주는 것이 편한것 같습니다.

국내에서는 Vue.js보다는 React.js를 더 많이 사용하는 것 같습니다.

같이 공부해보면 좋을 것 같습니다.

Answer 3

안녕하세요

개발자 입장에서는 DOM을 직접 컨트롤 하지 않아도 되는 장점이 있습니다.

DOM을 직접 컨트롤 하는 jQuery를 사용하다 Vue로 넘어올 때 혼란스러워 하는 부분입니다.

Vue는 데이터를 변경하면 event loop로 인해 layout은 자동으로 변경됩니다.

버튼 클릭 시 카운터를 올리는 예제인데 script 부분이 많이 줄어든 부분이 보이실 겁니다.

예제 확인 : https://codepen.io/maruara/pen/KKavVPL

- jQuery

<button type="button" id="btnAdd">Add 1</button> <p id="txt"></p> <script> jQuery(function($) { let counter = -1; $('#btnAdd').on('click', function(e) { counter++; $('#txt').text('위 버튼을 클릭한 횟수는 ' + counter + ' 번 입니다.'); }).trigger('click'); }); </script>

- Vue

<div id="app"> <button v-on:click="counter += 1">Add 1</button> <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p> </div> const app = new Vue({ el: '#app', data: { counter: 0 } });

Vue2 부터는 Virtual DOM을 지원하므로 성능을 올릴 수 있는 선택지도 넓어집니다.

직접 경험해 보는 것 만큼 좋은 것은 없다고 생각됩니다.

Vue 사이트에 가시면 예제가 쉽게 잘 되어 있으니 한 번 해 보시면 장/단점이 느껴지실 겁니다.