Why React
사내에 새로운 프로젝트를 시작하게 되면서 어떻게 jQuery로 되어 있던 코드들을 버리고 React를 도입하게 된 배경을 React의 메인 컨셉과 jQuery의 비교를 통해 설명하고자 한다.
jQuery
jQuery는 작고, 빠르며, 기능이 풍부한 자바스크립트 라이브러리입니다.
2006년에 jQuery가 처음 나왔을 당시 자바스크립트는 현재처럼 발전되어 있지 않았기 때문에 널리 사용되지 않았으며(현재는 Node.js를 통해 여러 분야에서 사용되고 있다.) 브라우저에 종속되어 있었다.
그렇기에 간편한 API들로 DOM 조작을 한다는 것으로 jQuery는 자바스크립트 영역에서 큰 혁명을 불러일으켰다.
//javascript
document.getElementById('root')
//jQuery
$('#root')위 예시와 같이 DOM을 보다 간편하게 조작할 수 있다.
이 밖에 jQuery의 장점들을 나열하면 다음과 같다.
- HTML 이벤트 메서드를 쉽게 사용
- CSS 조작 가능
- 이펙트나 애니메이션 주기 편함
React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
React는 Facebook(현 Meta)에서 2011년도에 Interactive UI elements를 구축하기 위해 만든 자바스크립트 라이브러리이다. 컴포넌트 기반의 개발 방식을 채택하여 내부적으로 상태를 독립적으로 관리하기 때문에 보다 낮은 결합도를 유지하여 보다 안정적인 개발을 할 수 있도록 도와준다.
이 밖에 React의 장점들을 나열하면 다음과 같다.
- 컴포넌트 기반 개발(재사용성 및 유지보수성)
- virtual DOM
- 생태계(커뮤니티)
그래서 원하는 게 뭔데?
이제부터 두 가지를 가볍게 비교해보며 서버개발팀 프론트엔드 팀원의 의견을 도출하고자 한다.
성능
기본적으로 jQuery는 ui를 조작하기 위한 라이브러리이지 성능 최적화를 위한 라이브러리가 아니다.
단순히 10000개의 Hello World element를 화면에 붙인다고 하자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="./index.js"></script>
</body>
</html>//index.js
console.time('DOMappend(jQuery)')
const div = $("#root");
for(let i =0; i< 10000; i++){
div.append("<p>Hello world</p>");
}
console.timeEnd('DOMappend(jQuery)')
//VanillaJS
console.time('DOMappend')
const div = document.getElementById("root");
for (let i = 0; i < 10000; i += 1) {
const p = document.createElement("p");
p.textContent = "Hello world";
div.appendChild(p);
}
console.timeEnd('DOMappend')하나는 jQuery를 통해 구현하였으며, 다른 하나는 VanillaJS로 구현한 코드이다.
이렇듯 순수 자바스크립트와 jQuery에 대한 속도 차이는 약 5배 정도 차이가 난다.(React 내에서도 VanillaJS를 사용해서 구현하는 것이 보통이므로 React에 속도 차이는 제외하도록 하겠다.)
물론 해당 예시는 극단적이고 Element를 10000개 씩 붙이는 경우는 없겠지만, jQuery를 통해 DOM을 조작하는 일이 잦거나 계속 되다 보면 분명 유의미한 성능차이를 보이게 될 것이다.
렌더링
웹 개발자들에게 가장 중요시 되는 것은 성능이라고 할 수 있겠다.
그 중에서도 렌더링 성능을 예로 들 수 있는데, DOM을 직접적인 조작을 하는 것은 렌더링 성능의 크나큰 영향을 줄 수 있다. 렌더링에 대해 잘 이해가 안간다면 이 글이 잘 정리되어 있으니 읽어보길 바란다.
DOM을 직접적으로 조작을 하게 되면 Reflow문제가 발생하게 되는데
reflow란, HTML 안에 요소들의 레이아웃을 계산해서 렌더트리를 그리는 과정이다.
이는 리소스와 시간을 많이 잡아먹는 과정으로 리플로우가 많은 과정을 지양해야 한다.
왜 갑자기 렌더링 얘기를 하다가 Reflow 얘기가 나왔냐고 묻는다면, DOM을 직접적으로 조작하게 된다면 Reflow가 발생하기 때문이다.
그런데 여기서 jQuery의 메소드가 DOM을 직접 조작하기 때문에 가벼운 웹 프로젝트에서는 상관이 없지만 사용자와 인터렉션이 많은 큰 웹 애플리케이션 같은 경우에는 렌더링 퍼포먼스에 큰 저하를 야기하기 때문이다.
이와 비교하여 React는 Virtual DOM을 사용하기 때문에 DOM 조작이 많이 일어나더라도 실제로 DOM에 반영되는 것은 변경사항만 한 번만 반영되게 된다.
정리
| jQuery | React | |
| DOM | DOM을 직접 조작 | Virtual DOM |
| 유지보수성 | 코드 작성방식이 간결하여 여러 메소드를 이어 붙이는 경우가 많고 코드를 막 작성할 시, 여러 코드에 영향을 주는 경우가 많다 | 컴포넌트 기반 아키텍처와 단방향 바인딩, 상태 관리를 통해 유지 보수성이 높다 |
| 생태계 | 구글 검색기준 2.3억개 | 구글 검색기준 22.5억개 |
표로 정리하자면 다음과 같다.
글을 작성하다보니 jQuery를 아주 나쁜 자식( ? )처럼 글을 쓴 것 같다.
이제와서 말하긴 뭐 하지만.. jQuery는 죄가 없다!
다만 기술이 발전하면서 javascript의 자체 성능도 타 언어들만큼 좋아지고 호환성마저 좋아졌다.
VanillaJS도 DOM을 조작할 수 있는 메서드들을 계속 만들어나가고 있고 비동기 통신을 위한 fetch함수도 점점 더 발전해나가고 있다.
그리고 정적 페이지들만 보여주던 예전과 다르게 기술이 발전한 만큼 사용자들의 복잡한 인터렉션을 처리할 일이 많아졌다.
이제는 정말 단순 웹이 아닌 "웹 애플리케이션"이라고 불릴 만큼 많은 일들을 처리하게 된다.
웹에 동적인 효과를 넣는 것부터 시작해서, 게임, VR.. 하다 못해 우주선에 까지 JS가 탑재되어 있다.
이렇듯 기술과 시대상이 변하면서 jQuery가 현 개발 영역에 맞지 않는 것 뿐이다.
아직도 현업에서 jQuery의 점유율은 높은 상태이고 충분이 좋은 라이브러리이다.
'리액트' 카테고리의 다른 글
| 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기(2) (0) | 2023.12.13 |
|---|---|
| 웹뷰 로딩 성능 개선하기 (1) | 2023.12.07 |
| 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기 (1) | 2023.12.07 |
| Should have a queue. This is likely a bug in React. Please file an issue 해결하기 (1) | 2023.12.06 |
| 리액트 라우터 (0) | 2023.06.08 |
