Vue(혹은 React)가 jQuery 와 비교했을 때 어떤 장점이 있나요?
기존에 JavaScript 는 jQuery 만 사용하다가 프론트엔드 개발을 더 하고싶어서 찾아보고 있습니다.
Vue.js 가 어떤 점에서 더 좋은지 궁금하네요.
Vue.js 를 사용하시는 현업 개발자님들의 답변을 듣고싶었습니다.
아 그리고~ 제가 아직 많이 부족한데요.
프론트엔드 기술 공부를 하는데 어떻게 하면 좋을지 조언도 부탁드립니다!
추운데 감기 조심하시고요. 감사합니다~~
안녕하세요 질문자님!
저는 개인적으로 리액트를 사용해봐서 리액트 위주로 말씀드리겠습니다. 다른 분이 vue.js와도 비교해주시면 좋겠네요^^
일단 리액트는 지속적으로 데이터가 변화하는 대규모의 웹 앱을 만들때 제이쿼리보다 성능이 좋습니다.
제이쿼리의 경우 데이터가 변화할 때 dom 구조 내 html 요소에 직접 접근해서 뷰를 바꾸는데요. 리액트를 사용하면 뷰를 아예 날려버리고 변화를 적용하게 됩니다. 리액트가 각각의 컴포넌트로 이루어져있고, 렌더링을 하기 때문인데요. 이해하기 쉽게 말씀드리자면 결과적으로 대규모 웹앱에선 성능이 더 좋아집니다.
이러한 이유로 스택 오버플로우 질문 개수로만 봐도 2016-7년을 기점으로 리액트가 매우 인기가 많아졌습니다.
Vue.js를 사용하게 되면 컴포넌트 단위로 개발이 가능하기 때문에 재사용성이 높아집니다.
또한 데이터 바인딩을 통해서 도큐먼트에 접근하지 않고도 데이터를 화면에 보여주는 것이 편한것 같습니다.
국내에서는 Vue.js보다는 React.js를 더 많이 사용하는 것 같습니다.
같이 공부해보면 좋을 것 같습니다.
안녕하세요
개발자 입장에서는 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 사이트에 가시면 예제가 쉽게 잘 되어 있으니 한 번 해 보시면 장/단점이 느껴지실 겁니다.
