jQuery에서 Vue.js와 React로 사고방식 전환하기

jQuery는 DOM을 조작하기에 편리한 도구입니다. 지금까지도 DOM을 컨트롤 하는 가장 강력하고 편리한 방법 중 하나입니다. 그래서 여전히 많은 대기업과 스타트업에서 jQuery를 사용하고 있습니다. 그만큼 안정성이 높고 사용하기에 편리하다는 의미도 되겠습니다.

그러나 jQuery는 대부분의 대형 프로젝트에서 무분별하게 쓰입니다. 그리고 심각한 성능 문제를 야기합니다. 또, 이미 한물간 퇴물 라이브러리로 인식되기도 합니다.

jQuery는 쉽습니다. 그래서 JavaScript를 다루지 못하는 사람도 쉽게 jQuery를 다룰 수 있습니다. 심지어 자바스크립트 배우기를 건너뛰고 jQuery를 이용해서 프로젝트를 진행하기도 합니다. 그러나 이것은 분명히 좋은 현상은 아닙니다.

주식 시장이 급락하던 3월에 프론트엔드 프레임워크의 검색량도 급감하는 것이 재미있습니다. 현재 세계에서 가장 많이 쓰는 프론트엔드 프레임워크의 검색량입니다. Vue.js가 절대 강자였지만 최근 어떠한 이슈로 리액트가 다시 왕좌를 탈환했습니다.
<자료 : 구글 트렌드>

이미 오래전부터 프론트엔드프레임워크나 라이브러리는 폭 넓게 사용되어 왔습니다. 대표적인 것은 3가지가 있습니다. 먼저 페이스북에서 지원하는 리액트입니다. 그리고 Evan Yu라는 개인 개발자가 만든 Vue.js,그리고 끝으로 이들 중 가장 역사가 오래된 Angular입니다. 앵귤러는 과거 앵귤러JS의 진화된 버전입니다. 구글에서 시작된 프로젝트입니다.

세계적으로는 모두 비등비등한 선호도를 갖고 있습니다. 그러나 한국에서는 압도적으로 리액트의 인기가 높습니다. 어쨌든 어떤 도구를 쓰든 그것은 크게 중요하지는 않습니다. 그리고 오늘 이야기 할 주제도 그건 아니니까 일단 넘어가겠습니다.

jQuery에서 Vue.js나 React로 넘어갈 때 사고방식 전환을 하지 못해 어려움을 겪는 분들이 많습니다. 알고보면 별 것 아닙니다. 그런데, 아주 기본적인 설명을 해주는 사람이 없다보니 아주 기초적인 부분에서 걸려 넘어지는 분들이 계시는 것 같습니다.

그렇다면 jQuery에서 Vue.js로 넘어갈 때 어떤 사고방식 전환을 해야하는지 핵심적인 부분을 간략하게 짚어보겠습니다.

jQuery의 DOM First 사고 방식

jQuery는 DOM에 직접적으로 접근하고, 컨트롤합니다.

  여기를 컨트롤 해주세요

위와 같은 HTML 마크업이 있습니다. jQuery를 이용해서 <span>태그를 감춰보겠습니다.

$(".box span").hide();

CSS 선택자와 거의 유사한 방법으로 DOM에 접근이 가능합니다. 편리하고 강력합니다.

Vue.js는 Data First 사고 방식

Vue는 가급적 DOM에 직접 접근하지 않고, 직접 컨트롤 하지 않습니다.

  여기를 컨트롤 해주세요

jQuery는 CSS 선택자와 동일한 문법을 씁니다. 그래서 DOM에 직접 접근합니다. 그러나 Vue.js는 tag, id, class 값을 통한 직접 적인 DOM 접근을 하지 않습니다.

위의 예제에서는 v-if라는 컨디셔너 디렉티브가 붙어있습니다.

show: true

ES6의 export default를 이용해서 data 객체에 다음과 같이 show에 true값을 적용합니다. 그렇다면 앞서 작성한 v-if문은 <span>태그를 그대로 출력할 것입니다. 반대로 값이 false로 바뀌면 <span>태그는 사라지겠죠?

위 코드의 온전한 컴포넌트의 코드는 다음과 같습니다.

Vue는 기본적으로 위와 같은 구조로 작동을 합니다. data 객체의 return 구문 안에 템플릿에 뿌려 줄 데이터나 DOM 컨트롤을 위한 데이터를 넣어주면 됩니다. 그리고 이 데이터는 물론 동적으로 관리할 수 있으며 실시간으로 감시할 수도 있습니다. 그 부분에 대한 건 제가 혹시라도 나중에 다룰 수 있으면 다루어 보겠습니다.

객체에 들어가는 데이터들은 JSON을 사용할 수 있다면 쉽게 사용할 수 있습니다. JSON과 거의 흡사한 문법을 사용합니다.

정말 최대한 간단히 설명을 해보았습니다. Vue.js는 jQuery와 달리 DOM에 직접 접근하지 않습니다. 다만, 데이터의 상태 변동에 따라 DOM도 변동하게 되는 방식입니다.

2020년 8월 7일
송종식 드림