jQuery ✅ 자주 쓰는 메소드와 Vanilla JS vs jQuery 비교

 

 

jQuery는 2006년에 등장해 한때 웹 프론트엔드의 표준처럼 사용되었지만,
ES6 이후 Vanilla JS가 크게 발전하면서 신규 프로젝트에서는 많이 줄어들었습니다.
그러나 레거시 프로젝트 유지보수나 간단한 UI 작업에서는 여전히 자주 등장합니다.

 

이번 포스팅에서는 jQuery에서 자주 쓰는 메소드와,

동일한 기능을 Vanilla JS로 구현했을 때의 비교를 정리해보겠습니다.

---

🧾 1. DOM 선택

 

// jQuery
$(".item").addClass("active");

// Vanilla JS
document.querySelectorAll(".item").forEach(el => el.classList.add("active"));

 

✅ jQuery는 $()로 간단하게 선택 가능
✅ Vanilla JS도 querySelectorAll로 많이 편리해졌음

---

🖱️ 2. 이벤트 처리

 

// jQuery
$(".btn").on("click", function() {
  alert("버튼 클릭됨!");
});

// Vanilla JS
document.querySelector(".btn").addEventListener("click", () => {
  alert("버튼 클릭됨!");
});

 

📌 jQuery의 .on()은 이벤트 위임까지 지원 가능 →

 

$(".list").on("click", ".item", function() {
  console.log("아이템 클릭!");
});

 

👉 Vanilla JS에서는 e.target.matches(".item") 같은 방법으로 직접 처리 필요

---

✍️ 3. HTML 조작

 

// jQuery
$(".title").text("새로운 제목");
$(".content").html("<b>굵게 표시</b>");

// Vanilla JS
document.querySelector(".title").textContent = "새로운 제목";
document.querySelector(".content").innerHTML = "<b>굵게 표시</b>";

 

---

🔧 4. 속성(Attribute) 제어

 

// jQuery
$("#username").attr("placeholder", "아이디 입력");

// Vanilla JS
document.querySelector("#username").setAttribute("placeholder", "아이디 입력");

 

---

🎨 5. CSS 스타일 변경

 

// jQuery
$(".box").css({
  color: "red",
  fontSize: "20px"
});

// Vanilla JS
let box = document.querySelector(".box");
box.style.color = "red";
box.style.fontSize = "20px";

 

---

🔄 6. Ajax 요청

 

// jQuery
$.ajax({
  url: "/api/data",
  method: "GET",
  success: function(res) {
    console.log(res);
  }
});

// Vanilla JS (Fetch API)
fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data));

 

📌 Ajax는 이제 Fetch API가 표준이며, async/await까지 지원되어 훨씬 직관적임

---

⚡ 7. jQuery의 강점

• DOM 선택/조작이 짧고 간단
• 이벤트 위임(.on)이 내장되어 편리
• Ajax, 애니메이션 등 내장 기능 풍부
• 레거시 프로젝트에서 여전히 사용됨

⚠️ 한계점

• 번들 사이즈가 크다 (~90KB)
• 현대 브라우저의 표준 API로 대부분 대체 가능
• 신규 프로젝트에서는 잘 사용하지 않음

---

📝 마무리 정리

• jQuery는 과거 웹 개발을 혁신했지만, 현재는 레거시 유지보수 중심
• Vanilla JS가 발전하면서 대부분 대체 가능
• 실무에서는 jQuery 코드 → Vanilla JS 리팩토링을 자주 하게 됨
• jQuery를 아예 몰라도 되진 않지만, 비교 학습 용도로만 익히는 게 좋음