jQuery를 VanillaJS로 대체하기

최근 대부분의 브라우저는 ES6를 지원합니다. 
jQuery는 엘리먼트 선택이나 이벤트 등록, 데이터 요청 등의 작업에서 브라우저 호환성에 신경쓰지 않고  사용할 수 있는 편리한 메소드를 제공해 주었습니다. 
그러나 이제는 더 이상 라이브러리에 의존하지 않아도 되도록 브라우저 환경이 발전해 왔습니다.

이 글에서 VanillaJS는 아무 라이브러리도 사용하지 않는 순수 자바스크립트(ES6)를 의미합니다.

다음 작업들에 대해서 jQuery구현과 VanillaJS구현을 알아보겠습니다.

• 엘리먼트 선택
• 이벤트
• 스타일 적용
• Document 로딩 완료 이벤트
• class 등록과 삭제
• ajax 요청
• 엘리먼트 생성
• DOM 제어

 

 

엘리먼트 선택

jQuery의 jQuery의 셀렉터인 $()는 querySelector로 대체될 수 있습니다.

// jQuery: 모든 .element 인스턴스 선택
$.(".element");

// .element 첫번째 요소만 선택
document.querySelector(".element");

// .element 모든 요소 선택
document.querySelectorAll(".element");

 

선택된 요소에 함수 실행

querySelectorAll()은 jQuery와 마찬가지로 배열을 리턴합니다. 

jQuery 에서는 선택된 배열을 하나의 객체로 취급하여 함수를 한 번만 호출하면 되지만, VanillaJS에서는 배열을 루프를 돌며 각각 호출해 주어야 합니다.

// jQuery에서 모든 요소 안보이게 하기
$(".element").hide();

// VanillaJS에서는 .element 엘리먼트 배열의 각 원소마다 함수를 호출
document.querySelectorAll(".element").forEach(ele => { ele.style.display = "none" }

 

선택된 엘리먼트 배열에서 특정 요소 찾기

jQuery에서 find()는 querySelector()를 체인으로 호출하여 구현할 수 있습니다.

// jQuery에서 .container 엘리먼트들중 .element의 첫 번째 엘리먼트 가져오기
var container = $(".container");
container.find(".element");

// VanillaJS에서 동일한 기능 수행
var container = document.querySelector(".container");
container.querySelectorAll(".element");

 

엘리먼트 트리 구조 탐색

특정 엘리먼트의 부모, 형제 엘리먼트를 선택하는 방법입니다.

// jQuery
$(".element").next();
$(".element").prev();
$(".element").parent();

// VanillaJS
var element = document.querySelector(".element");
element.nextElementSibling;
element.previousElementSibling;
element.parentElement;

 

이벤트

jQuery에서 이벤트를 등록하는 방법은 여러가지가 있습니다. 
VanillaJS에서는 addEventListener로 모두 대체됩니다.

// jQuery
$(".element").click(function(e) { /* 클릭 이벤트 처리 */ });
$(".element").mouseenter(function(e) { /* 클릭 이벤트 처리 */ });
$(document).keyup(function(e) { /* 키 입력 이벤트 처리 */ });

// vanillaJS
document.querySelector(".element").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".element").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

 

동적으로 추가되는 엘리먼트에 이벤트 등록

jQuery의 on()은 동적으로 추가되는 엘리먼트에 실시간으로 이벤트 등록을 해주는 메소드입니다.
VanillaJS에서는 우선 엘리먼트를 생성하여 DOM에 추가된 후 이벤트 핸들러를 등록해주는 방법을 사용해야 합니다.

// jQuery
// .item 엘리먼트가 DOM에 동적으로 추가 되는 경우에도 클릭 이벤트를 처리할 수 있다
$(".list").on("click", ".item", handleClick);

// VanillaJS
// 엘리먼트를 생성하고 DOM에 추가
var list = document.createElement("div");
document.querySelector(".item").appendChild(list);
// 엘리먼트에 이벤트 등록
list.addEventListener("click", handleClick);

 

커스텀 이벤트 생성과 실행

이벤트를 수동으로 실행시키는 trigger()는 dispatchEvent()로 대체될 수 있습니다.

// jQuery
// document와 .element에서 customEvent 실행
$(document).trigger("customEvent");
$(".element에서").trigger("customEvent");

// vanillaJS
// customEvent 생성과 실행
document.dispatchEvent(new Event("customEvent"));
document.querySelector(".element에서").dispatchEvent(new Event("customEvent"));

 

스타일 적용

스타일을 적용하는 css()메소드는, 각 엘리먼트의 style속성에 값을 대입하는 것으로 같은 기능을 할 수 있습니다.

// jQuery
// .element 를 선택하고 텍스트 색상을 검정으로 변경
$(".element").css("color", "#000");

// vanillaJS
// .element 에 해당하는 첫번째 엘리먼트를 선택하고 텍스트 색상을 검정으로 변경
document.querySelector(".element").style.color = "#000";

 

jQuery에서는 키-값 구조의 객체를 전달하여 여러 속성을 한번에 적용할 수 있습니다.
VanillaJS에서는 각 값을 문자열로 한번에 전달할 수 있지만, 약간의 제약사항이 있습니다.

// jQuery
// 여러개의 스타일 적용
$(".element").css({
    "color": "#000",
    "Background-color": "red"
});

// vanillaJS
// 스타일을 한번에 적용 (그러나 이 엘리먼트에 있던 모든 CSS가 사라지고 이것으로 대체된다)
element.style.cssText = "color: #000; background-color: red";

 

Document 로딩 완료 이벤트

모든 DOM객체가 로딩되었음을 알 수 있는 $(document).ready()를 다음과 같이 구현할 수 있습니다.

// jQuery
$(document).ready(function() {
    /* DOM이 완전히 로드된 후에 할 일들 */
});

// vanillaJS
// 메소드를 정의하고 그것을 호출한다
var ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => {
    /* DOM이 완전히 로드된 후에 할 일들 */
});

 

class 등록과 삭제

class관련 메소드는 classList속성으로 같은 기능을 할 수 있습니다.

// jQuery
// focus 클래스의 추가, 제거, 적용/비적용
$(".element").addClass("focus");
$(".element").removeClass("focus");
$(".element").toggleClass("focus");

// vanillaJS
// focus 클래스의 추가, 제거, 적용/비적용
var element = document.querySelector(".element");
element.classList.add("focus");
element.classList.remove("focus");
element.classList.toggle("focus");

 

classList는 여러개의 클래스를 동시에 제어할 수 있습니다.

// focus, highlighted 클래스를 추가하고, 다시 제거한다
var element = document.querySelector(".element");
element.classList.add("focus", "highlighted");
element.classList.remove("focus", "highlighted");

 

상호배타적인 두 개의 클래스를 서로 교체하는 replace() 메소드가 있습니다.

// focus클래스를 제거하고 blurred클래스를 추가
document.querySelector(".element").classList.replace("focus", "blurred");

 

엘리먼트에 특정 클래스가 적용되어 있는 확인 하려면,  classList속성의 contains()메소드를 사용합니다.

// jQuery
// "focus" 클래스가 적용 되어있는지에 따라 작업 수행
if ($(".element").hasClass("focus")) {
    // 작업 수행
}

// vanillaJS
// "focus" 클래스가 적용 되어있는지에 따라 작업 수행
if (document.querySelector(".element").classList.contains("focus")) {
    // 작업 수행
}

 

ajax 요청

fetch()는 비동기 네트워크 요청을 생성하는 메소드입니다. URL을 파라미터로 받아 서버 응답을 처리하는 Promise객체를 리턴합니다.

// jQuery
$.ajax({
    url: "data.json"
    }).done(function(data) {
        // 응답 처리
    }).fail(fucntion() {
        // 에러 처리
    });

// vanillaJS
fetch("data.json")
    .then(data => {
        // 응답 처리
    }).catch(error => {
        // 에러 처리
    });

 

엘리먼트 생성

createElement()에 원하는 태그 이름을 전달하여 엘리먼트를 생성합니다.

// jQuery
$("<div/>");
$("<span/>");

// VanillaJS
document.createElement("div");
document.createElement("span");

 

DOM 제어

엘리먼트의 텍스트를 업데이트 하기 위해 흔히 innerHTML을 사용합니다만, 이것은 XSS공격에 취약합니다. textContent속성을 이용하면 안전하게 텍스트를 읽거나 수정할 수 있습니다.
그러나 innerHTML처럼 엘리먼트 추가와 같은 작업을 할 수 없습니다. 이 속성은 전달된 텍스트를 모두 원본(raw) 텍스트로 표현합니다.

var element = document.createElement("div");
element.textContent = "Text";
// 또는 텍스트 노드를 생성하고 그것을 DOM에 추가한다.
var text = document.createTextNode("Text");
element.appendChild(text);

 

새로운 엘리먼트의 생성과 추가는 appendChild()를 사용합니다.

// jQuery: div을 생성하고 .container에 붙인다
$(".container").append($("<div/>"));

// VanillaJS: div을 생성하고 .container에 붙인다
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);