// JavaScript
document.getElementById('myDiv')
// jQuer
$('#myDiv')
// React
import React from 'react';
const MyComponent = () => {
const myRef = React.useRef(null);
return <div ref={myRef} />;
}jQuery
jQuery가 처음 나온 2006년 자바스크립트는 넓게 사용되지 않았고 사용하기 쉽지 않았다.
그러나 jQuery는 여러줄의 javascript 코드를 한줄의 코드로 호출할 수 있는 메서드로 래핑함으로써 업계에 혁명을 일으켰다.
- 'write less, do more'
AJAX와 DOM 조작을 단순화 시켰다.
아직까지도 많은 기업들이 jQuery를 사용하고 있다.
jQuery의 특징
- HTML/DOM 조작
- HTML 이벤트 메서드를 쉽게 사용
- CSS 조작 가능
- 이펙트나 애니메이션 주기 편함
React
Interactive UI elements를 구축하기 위해 페이스북에서 2011년에 만든 오픈소스 라이브러리.
재사용 가능한 라이브러리 코드를 제공
-> 크고 복잡한 동적인 single pase application을 만들 수 있게 됨
React의 특징
- UI의 특정 부분을 만들어서 재사용
- JSX를 사용하면 DOM을 직접 조작 할 수 있음
- Virtual DOM을 제공하여 웹사이트의 성능을 높임
| jQuery | React |
|---|---|
| DOM을 직접 제어, 느림 | vitual DOM을 사용하여 더 빠름 |
| 사이즈가 커지면 스파게티 코드가 됨 | 컴포넌트 기반의 아키텍쳐와 virtual DOM 덕분에 큰 사이즈 앱을 만드는데 적합함 |
| npm package가 리액트보다 더 적다. (npm이 jQuery로 부터 많이 이탈 된 2019년에 나왔기 때문) | npm package가 많아서 third-party libraries를 사용할때 더 좋다. |
| jQuery의 라이브러리는 React에 비해 18% 가볍다.(약75kB) | 더 무겁다(약 95kB) |
어떤 것이 더 좋은가?
- 어디에 사용되느냐에 따라 다르다.
- 간단한 웹을 만들땐 jQuery는 좋은 반면,
React는 보다 정교한 기능을 수행하는 데 도움이 되며, 주로 UI개발, DOM 조작 등을 강조한다. - React의 virtual DOM과 달리 jQuery 는 우선 최초로 DOM 을 찾으려면 document 에서부터 쭉 타고 내려오면서 찾아야한다. 그러면 원하는 태그를 찾을 때까지 최상단 엘리먼트에서 트리 탐색을하며 내려오니까 더 많은 검색이 발생한다.
결론
javascript의 브라우저 호환성이 충분히 좋아졌고 javascript의 지속적인 업데이트로 안정성이 높아지고 기능이 추가되면서 jQuery를 사용할 이유가 없어졌다.
복잡한 SPA를 만들 땐 React를 사용하자.
(간단한 웹페이지는 javascript만을 사용하여 만드는게 좋다.)
참고 문헌
움직이는 만큼 행복해진다