웹 개발의 시대가 jQuery에서 React 등으로 넘어온 이유가 무얼까요? #135

jswith · 2022-10-30T12:36:18Z

jswith
Oct 30, 2022
Maintainer

웹 개발의 시대가 jQuery에서 React 등으로 넘어온 이유가 무얼까요?

웹 페이지의 구성

웹 페이지는 DOM으로 구성된다. DOM이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용하여 웹 문서를 체계적으로 정리한 모델을 의미한다. 즉 DOM은 웹 문서와 그 안의 모든 요소들을 객체로 인식하고 처리한다.

그렇다면 DOM은 어떤 구조로 구성되어 있을까?

DOM은 트리 구조로 이루어져 있는데, 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. DOM을 트리 구조라고 부르는 이유는 DOM의 형태가 마치 나무를 뒤집어 놓은 모양과 유사하기 때문이다.

만약 이렇게 생긴 HTML 코드가 있다면

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>DOM</h1>
  <img src="https://via.placeholder.com/150" alt="150px">
</body>
</html>

DOM 트리는 이렇게 구성된다.

만일 DOM 요소 하나하나의 값이나 상태를 조작하려면 요소를 선택하고 조작하는 방식이 필요하다.

그러나, DOM API를 다루는 것은 까다롭다.

DOM을 선택하는 주요 방법으로, ID 선택자를 활용하는 getElementById와 Class 선택자를 활용한 getElementByClassName이 있다. 둘 다 DOM을 가지고 오는 함수이지만 이 둘은 서로 다른 타입의 값을 리턴한다. 또한 브라우저 별로 DOM API와 스펙이 모두 다르기 때문에 이러한 것들을 일일이 고려하며 개발하는 것은 매우 까다롭다.

jQuery의 등장

이러한 문제점 속에 등장한 것이 바로 jQuery이다. jQuery는 기존의 DOM 조작 방식과 다르게 DOM을 쉽게 선택하고 조작할 수 있도록 돕는다. 하지만 jQuery에는 치명적인 문제점이 하나 있었는데 속도가 매우 느리다는 것이다. 단순히 DOM을 선택하는 경우에도 바닐라 자바스크립트 코드보다 몇 배나 느린 것이다. 심지어 수십배까지 느릴 수가 있다.

왜 그럴까? 크로스 브라우징 등의 이슈를 해결하기 위해 기존 네이티브 코드들을 수많은 코드들로 wrapping해두었기 때문이다. 현대의 사이트들은 실시간으로 수많은 데이터를 처리하는데, 이렇게 느린 속도를 가진 jQuery를 사용한다면 사이트의 속도가 느려질 뿐만 아니라 서비스의 경쟁력이 떨어지는 결과를 초래할 수 있다.

React의 등장

React는 jQuery의 어떤 문제점을 해결하고 싶었을까? React는 기본적으로 개발자에게 DOM API를 쓸 필요가 없도록 만든다. 개발자는 React의 문법에 맞게 상태만 관리하면 상태를 기준으로 React가 알아서 DOM을 렌더링해준다. 즉 변하는 데이터 상태를 선언적인 문법으로 관리해주면 나머지는 React가 관리해주는 방식이다.

그렇다면 React는 어떤 방법을 통해 이러한 방식을 구현했을까?

Virtual DOM, JSX, Diffing Update를 통해서이다.

Virtual DOM

Virtual DOM은 DOM의 형태를 본떠 만든 객체이다.

다음과 같은 HTML 정보는

<div id="container">
  <p>VirtualDOM</p>
</div>

아래와 같은 객체로 추상화 된다.

const VirtualDOM = {
    tag: 'div',
    props: {
      id: 'container'
    },
    children: [
      {
        tag: 'p',
        props: {},
        children: ["VirtualDOM"],
      },
    ],
};

이러한 과정은 createElement 함수가 담당하는데,

function createElement(tagName, props, ...children) {
  return { tagName, props, children: children.flat() }
}

개발자가 매 번 createElement 함수를 통해 Virtual DOM을 생성하는 것은 번거롭다. 이 작업을 쉽게 해주는 것이 JSX다.

JSX

개발자가 아래와 같이 마크업 문법을 작성하면,

<div id="container">
  <p>VirtualDOM</p>
</div>

바벨에서 createElement 함수로 트랜스파일해준다.

createElement("div", {
  id: "container"
}, createElement("p", null, "VirtualDOM"));

JSX를 활용해 생성한 Virtual DOM은 객체일 뿐이므로, 이 객체를 Real DOM에 렌더링하는 과정이 필요하다. React는 사용자가 DOM API를 직접 건드리지 않아도, 내부적으로 Virtual DOM 객체를 Real DOM에 반영해준다. 이 반영 과정 중에 일어나는 것이 바로 Diffiing Update라는 과정이다.

Diffing Update

비교적 용량이 큰 Real DOM 과 업데이트된 Real DOM을 비교하여 변경된 부분을 적용시키는 것이 아닌, 비교적 용량이 작은 객체인 Virtual DOM과 업데이트된 Virtual DOM을 비교하여 충분히 빠르게 업데이트해 주는 것이 핵심이다. 개발자가 hook을 통해 상태를 변경해주기만 하면 리액트가 알아서 변경 사항을 렌더링해준다. 즉 개발자들은 DOM 조작에 대해 신경쓰지 않을 뿐만 아니라 좀 더 빠른 DOM의 업데이트라는 장점을 누릴 수 있게되었다.

정리하면

DOM 조작은 브라우저마다 스펙이 다르므로 까다로운 행위였다.
jQuery는 이런 상황 속에서 DOM 조작을 쉽게 해줄 수 있도록 도와주었다.
하지만 jQuery는 DOM 조작 성능이 좋지 않다.
개발자가 직접 DOM을 조작하지 않고도 DOM을 변화시킬 수 있는 React가 등장하였다.
React는 Diffing Update 과정을 통해 효율적으로 변경사항을 렌더링하므로 jQuery보다 성능이 좋다.
성능도 좋고 개발자의 생산성도 증대되었다. 안 쓸 이유가 없다.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

웹 개발의 시대가 jQuery에서 React 등으로 넘어온 이유가 무얼까요? #135

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

웹 개발의 시대가 jQuery에서 React 등으로 넘어온 이유가 무얼까요? #135

jswith Oct 30, 2022 Maintainer

웹 개발의 시대가 jQuery에서 React 등으로 넘어온 이유가 무얼까요?

웹 페이지의 구성

그러나, DOM API를 다루는 것은 까다롭다.

jQuery의 등장

React의 등장

Virtual DOM

JSX

Diffing Update

정리하면

References

Replies: 0 comments

jswith
Oct 30, 2022
Maintainer