제 프젝에 jQuery 쓰겠습니다. 리액트왜씀

제 메인 프로젝트에 jQuery 쓰겠습니다.

React는 번들 사이즈만 크고 Virtual DOM? 오버헤드죠?

jQuery는 무려 10년 넘게 사용되는 최고의 라이브러리입니다. 애초에 지금 React, Next.js 이런 거 다 굳이에요, 굳이.

아니 아직도 깃허브에서 무려 59.6k 스타를 가지고 있고요???

JavaScript 라이브러리 중에서 무려 사용률이 70%가 넘습니다. 이걸 왜 안 씁니까? 저희 소수가 되지 말고 다수가 됩시다. 지금 리액트 너무 홍대병이에요.

뭣보다 이거 2025년 기준입니다. 글 쓴 시점에서 방금 사진 찍어온거에요.
여기에 들어가셔서 확인도 가능합니다.

그냥 잔잔하게 저희 나대지 말고 다시 jQuery 씁시다...

.

.

.

.

.

죄송합닏다. 헛소리는 줄이고 본론으로 들어가겠습니다.

---

Why do you dislike jQuery?

근데 jQuery 왜 싫어하세요?

사실 최근에 개발을 시작하셨다면, 특히 요즘 AI로 바이브 코딩 하시는 분들은 애초에 jQuery를 모르실 수도 있습니다. 그니까 '할 줄 모른다'가 아니라 '그게 뭔데?'를 말하는거에요.

jQuery를 안 쓰는 분들의 의견을 제가 인터넷 바다에서 탐색을 해왔습니다. 대부분 이유가 비슷하시더라구요.

1. 자유롭고 쉬운 코드 구조가 스파게티 코드를 유발함.
2. 대부분의 jQuery 기능을 ES6+ JavaScript가 해결함.
3. Virtual DOM 기반 프레임워크와 철학 자체가 충돌. (DOM 직접 조작 패러다임)
4. 그저 레거시.

따지고 보면 다 팩트입니다. 저는 JavaScript 말고 jQuery 강의와 함께 개발에 입문을 했었는데, 쉽지만 자유로운 코드 구조가 존재하는 거도 팩트고, 애초에 jQuery의 대표적인 기능인 $() 마저 이제 ES6+ 에서 다른 형태로 사용할 수 있습니다.

예시를 들어볼까요.

선택자 $()는 document.querySelector()로 대체됐습니다.

// jQuery
$('.btn')
$('#app')

// ES6+
document.querySelectorAll('.btn')
document.querySelector('#app')

클래스 조작은 선택한 요소에 .classList로 접근할 수 있고요.

// jQuery
$(el).addClass('active')
$(el).removeClass('active')
$(el).toggleClass('active')
$(el).hasClass('active')

// ES6+
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

jQuery의 대표 기능인 Ajax는 Fetch API로 더 간결하게 쓸 수 있고요?

// jQuery
$.ajax({ url: '/api', method: 'GET' })
$.get('/api')
$.post('/api', data)

// ES6+
fetch('/api')
fetch('/api', { method: 'POST', body: JSON.stringify(data) })

DOM 조작이나 애니메이션도 네이티브 API로 대체됐습니다.

// jQuery
$(el).attr('href')
$(el).attr('href', 'url')
$(el).text()
$(el).html()
$(el).append(child)
$(el).remove()

$(el).fadeIn()
$(el).animate({ opacity: 0 }, 500)

// ES6+
el.getAttribute('href')
el.setAttribute('href', 'url')
el.textContent
el.innerHTML
el.append(child)
el.remove()

el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500 })
// 또는 CSS transition/animation 활용

솔직히 애니메이션은 ES6+가 더 장황하고, 문법 자체도 jQuery가 더 단순하긴 해요. 근데 외부 의존성 없이 대부분의 기능이 대체된 현 시점에서, jQuery를 굳이 다시 쓰긴 힘든 게 사실입니다.

---

근데 솔직히...

레거시 같긴 해요. 근데 아쉬운 점도 분명히 있는 거 같습니다.

jQuery는 장점도 가지고 있는데 이런 큰 단점들 때문에 특유의 장점이 완전히 묻히네요.

위에 코드를 보시면 아실 수 있듯 솔직히 JavaScript 진영에 입문하기 위해서는 ES6+이 좀 장황하게 느껴질 수도 있습니다. 그리고 React처럼 Virtual DOM 원리를 쓰는 라이브러리가 아니라면 jQuery 정도는 그냥 깔아서 문법 짧게 쓰기 좋구요.

그냥 예시를 봅시다!

// jQuery
$('.card')
  .addClass('active')
  .removeClass('hidden')
  .find('.title')
  .text('새 제목')
  .end()
  .find('.content')
  .html('<p>새 내용</p>')
  .end()
  .fadeIn()
  .delay(1000)
  .slideUp()

// ES6+
const card = document.querySelector('.card')
card.classList.add('active')
card.classList.remove('hidden')
card.querySelector('.title').textContent = '새 제목'
card.querySelector('.content').innerHTML = '<p>새 내용</p>'
card.style.display = 'block'
card.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 400 })
  .finished.then(() => {
    return new Promise(resolve => setTimeout(resolve, 1000))
  })
  .then(() => {
    card.animate([
      { height: card.offsetHeight + 'px' },
      { height: 0 }
    ], { duration: 400 }).finished.then(() => {
      card.style.display = 'none'
    })
  })

한눈에 봐도 jQuery가 간단해보이지 않나요. 애초에 저런 코드가 나오는 거 자체가 코드를 못 짠 거긴 하지만 저런 식으로 ES6+에 부딪힐 빠엔 혼자할 땐 jQuery를 사용하는게 더 편해보입니다.

아깝다 아까워 이런 그렇게 구리지 않은 친구가 레거시가 되다니. 트렌드가 무섭죠? 곧 React도 이렇게 되려나 ~

근데 반전이 있습니다. 사실 꽤 화제가 됐던 내용이기도 해요.

---

얘 아직도 업데이트 되고 있습니다.

jQuery 공식 사이트 들어가면 볼 수 있는 글자가 있습니다.

jQuery 4.0 is coming soon! Prepare by ~~...

다시 돌아온답니다. 4.0 버전으로요. 이제 다시 React의 시대는 가겠네요 ㅇㅇ 저희 다시 이거 씁시다.

뭐가 바껴서 돌아오는지 제가 정리를 해봤습니다.

jQuery 4.0 주요 변경사항

항목	내용
IE 지원	IE 10 이하 드랍, IE 11은 5.0에서 제거 예정
레거시 브라우저	Edge Legacy, iOS 11 미만, Firefox 65 미만 지원 중단
소스 구조	AMD → ES 모듈 마이그레이션, Rollup 번들링
슬림 빌드	Ajax, Deferreds, Callbacks 제외 — gzip 20kb 미만
제거된 API	push, sort, splice, 자동 JSONP 승격
추가된 기능	FormData 지원, Trusted Types + CSP 지원

묘하게 괜찮은 거 같음.

IE 지원 이제 필요 없죠? 누가 씁니까. 앵간해선 안 쓰는 브라우저 관련 기능 지워서 용량 관리 하는 거 상당히 좋아보입니다~ 당연히 레거시 브라우저 관련도 엄청 좋아보이구요.

소스 구조도 현대적으로 바뀌었고, 슬림 빌드 추가도 좋은 거 같습니다. $() 문법만 쓰고 싶을 때 쓰면 좋을 듯요.

제거된 API는 다 이제 대체됐기에 그런 거라 생각이 되고, 추가된 기능도 상당합니다.

현대적이에요.

근데 전 딱히 안 내키네요;

---

이게 그래서 무슨 의미를 가지는가?

사실 그렇게 큰 의미는 없습니다. 앵간한 스타트업이나 신생 프로젝트에선 당연하듯 jQuery는 고려하지도 않을 거고, 옛날 레거시 프로젝트나 취미로 개발을 하는게 아니라면 굳이일 겁니다.

레거시로 남아있던 상징과도 같던 jQuery가 오히려 레거시와는 정반대의 행보를 보이는게 상당히 흥미롭기도 하네요.

그리고 현재 jQuery의 취급을 나중에 React나 Next.js 같은 프레임워크가 이어 받을 수도 있으려나 잘 모르겠네요.

메인 프로젝트에 사용하긴 솔직히 안 땡기는데, 사이드 프로젝트에 한 번 써보는 건 나쁘지 않은 선택이 될 수도 있을 거 같네요. 긴 글 읽어주셔서 감사합니다.ㅎㅎ 아니아니 좀 더 이어쓸게요

---

jQuery 4.0 출시

다운로드 버튼 눌러도 여기선 다운로드 안 됩니다.

결국엔 출시를 했습니다. jQuery가 업데이트를 했다구요!! 여러가지 변경 사항이 적용을 했고, 해커뉴스 같은 커뮤니티에서도 반응이 긍정적입니다.

다시 태어난 제이쿼리를 사용해서 이 친구를 22세기까지 사용해봅시다.