JQuery
작고 빠르고 다양한 기능을 제공하는 JavaScript 라이브러리
JQuery와 html DOM 계층
DOM 계층은 HTML 트리 구조를 통해 사용자와 상호작용하는 구조적인 모델로 HTML 트리 구조 내에서 개별 객체에 접근이 제공되는 방법을 의미
즉, JQuery가 모든 요소에 접근할 수 있도록 도와주는 계층
기본 문법
JQuery() 함수를 사용하지만 프로그램 가독성 등을 위해 단축된 표현인 $() 을 사용한다.
괄호안에는 작업 대상이 되는 css 선택자나 js 객체를 기술
💡 어떤 기준으로 jquery로 가져온 요소를 변수에 저장할까?
$()도 함수이기 때문에여러번 반복 작성되는 요소에 대해서는 변수에 저장하여 사용하는 것이 좋다.
한 번만 사용되는 요소를 변수에 저장하는 것은 메모리 낭비를 초래한다.
변수에 요소를 담으면 오브젝트를 찾는 일을 반복하지 않아도 되므로 속도가 향상된다.
작동 원리
$() : 요소 선택
JQuery 페이지에 있는 해당 요소를 DOM 계층에게 요청
DOM 계층은 해당 요소들을 모두 반환
JQuery 동작 수행
장점
- 개발 속도가 빨라진다.
같은 기능을 수행하는 JS코드와 JQuery코드의 길이를 비교하면 JQuery코드가 소스량이 적다.
단점
- 성능이 떨어진다.
JQuery도 JS를 이용해 만든 것이기 때문에 JS코드와 비교했을 때 성능이 떨어진다.
JQuery를 사용하지 않는 이유?
- 웹 표준 API의 확장
- 웹 브라우저 환경의 변화
JQuery가 널리 사용된 배경(2007~2008)에는 인터넷 익스플로러가 세계 웹 브라우저 시장의 60% 이상을 점유하고 있었다.
그러나 크롬의 등장(2008)으로 브라우저 시장이 변혁을 맞이하며 인터넷 익스플로러의 점유율이 빠르게 잠식하였고 크롬은 우수한 렌더링 엔진과 빠른 버전 업그레이드로 JQuery와 같은 라이브러리를 사용하지 않고도 양질의 웹 애플리케이션 구현이 가능한 환경을 제공하게 되었다. - Virtual DOM을 사용하는 라이브러리의 등장
동적인 웹 페이지를 구성하기 위해서는 DOM 조작이 필수이다. 그러나 DOM 조작이 발생할 때마다 많은 연산을 발생시키므로 브라우저 성능이 저하되는 결과를 야기했다.
이러한 이슈를 해결방안으로 리액트라는 가상 돔을 사용하였다. 리액트는 메모리에 가상 돔을 구성하여 실제 돔과의 차이점을 비교하고 변경된 부분을 실제 돔에 적용할 수 있다. 이 방식은 성능이 뛰어나고 화려한 웹 페이지를 손쉽게 제작할 수 있어 개발자들의 환영을 받았다. 이후 Vue.js 와 같은 프레임워크와 라이브러리도 가상 돔을 적극적으로 활용하고 있다.
가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접적으로 조작하는 JQuery의 필요성이 줄어들게 된다.
