jQuery와 querySelector

Issue

jQuery를 사용해서 간단한 웹페이지 만들기 중에, jQuery에 대해서 한번 찾아봐야 겠다 싶었는데 뭔가 현업에서 사용하지 않는 분위기가 감지되었다. 최근 글은 많이 없고 2년 전 까지 게시물이 조금 있는 느낌. "jQuery 현업"으로 검색해보니 jQuery에 대한 슬픈 고찰이라는 재밌는 글을 발견했다. 

---

Try&Error

글의 요지는 초창기 Javascript에서 불편함을 해소하기 위해 jQuery가 탄생했으나, ES6이 나오고, SPA(Single Page App) 라이브러리, 프레임워크가 많아지면서 jQuery가 해소해주던 많인 부분이 ES6에서나 SPA 라이브러리, 프레임워크로 해결이 되니, 자연스럽게 사용빈도가 내려가고 있다는 것. 

 

그래서 나도 간단하게 jQuery로 구현했던 것을 querySelector로 바꿔 보았다.

---

Solution

// jQuery empty
$('#myElement').empty();
// Query Selector
const myElement = document.querySelector('#myElement');
myElement.innerHTML = '';
myElement.textContent = '';

// jQuery text
const text = $('#myElement').text();
// Query Selector
const myElement = document.querySelector('#myElement');
const text = myElement.textContent;

// jQuery hide
$('#myElement').hide();
// Query Selector
const myElement = document.querySelector('#myElement');
myElement.style.display = 'none';

// jQuery show
$('#myElement').show();
// Query Selector
const myElement = document.querySelector('#myElement');
myElement.style.display = 'block'; // 또는 'inline', 'inline-block' 등

// jQuery val
const value = $('#myElement').val();
// Query Selector
const myElement = document.querySelector('#myElement');
const value = myElement.value;

---

Learned

그래도 ES6가 나온 게 2015년, jQuery는 2020년 웹프레임워크 선호도 조사에서 1등에서 서서히 줄어들고 있으니, 자연스럽게 어디서나 접하고 사용할 수 있는 라이브러리라 생각해야 할 것 같다.

---