Vue(혹은 React)가 jQuery 와 비교했을 때 어떤 장점이 있나요?
저는 현재 퍼블리셔에서 프론트엔드 개발자로 전향하기 위해 공부중인데요.
기존에 JavaScript 는 jQuery 만 사용하다가 프론트엔드 개발자로 이직을 준비하면서
Vue.js 를 공부할 것을 추천받았습니다.
열심히 공부하고 있지만, ECMA 2015 문법도 생소하고 Vue.js 가 어떤 점에서 더 좋은지
잚 모르겠습니다. ^^;;
Vue.js 를 사용하시는 현업 개발자님들의 답변을 듣고싶었습니다.
아 그리고~ 제가 아직 많이 부족한데요.
프론트엔드 기술 공부를 하는데 어떻게 하면 좋을지 조언도 부탁드립니다!
추운데 감기 조심하시고요. 감사합니다~~
써보시면 압니다.
일단 코드양이 현저하게 줄어듭니다.
코드양이 줄어든다는 것은 가독성이 올라가고, 유지/보수가 쉬워진다는 의미로도 볼 수 있겠습니다.가장 큰 장점은 반응형 시스템을 사용할 수 있다는 것인데,
이것이 바로 Vue가 jQuery 가장 다른 부분이라고 할 수 있겠습니다.
Vue 객체 (Javascript 객체) 가 DOM 에 연결됩니다.
단순히 DOM 의 내용을 사용자가 수정했을 뿐인데, 연결된 Javascript 객체의 상태가 변경됩니다.
상태가 변경되면 다시 렌더링이 이루어지기 때문에 변경된 객체의 상태가 바로 화면에 반영됩니다.가령 예를들어, 사용자가 입력하는 것을 div tag 안에 뿌려주는 간단한 코드를 보면,
<div id="content"></div> <input type="text" id="text" placeholder="무엇이든 입력하세요."> <script> (function() { $('#text').keyup(function() { $('#content').html($(this).val()); }); })(); </script>jQuery는 이런식으로 코딩할 수 있을 텐데요, 우선 코드 가독성이 아주 나쁩니다. DOM selector로 #text를 집어와서 keyup event를 붙이고, 이벤트가 발생할 때마다 #text의 값으로 #content의 내용을 바꾸는 형태라고 볼 수 있습니다.
아래는 Vue로 짰을 때입니다.
<div id="app"> <div v-html="content"></div> <input type="text" placeholder="무엇이든 입력하세요." v-model="content"> </div> <script> new Vue({ el: '#app', data: { content: '' } }); </script>script 안쪽을 보시면 Vue 객체 선언하고 속성 두가지 설정해준 것 밖에 없습니다. 반응형 시스템이라서 사용자가 input tag에 값을 입력하면 Vue 객체의 data.content 값이 자동으로 바뀌고 바뀐 값이 그대로 div 안에 출력되는 것입니다.
jQuery도 DOM을 다루는 데에는 막강하지만 저는 Vue로 넘어오고 오랫동안 아픈데가 낫는 느낌이었습니다. 즐코딩하세요!