나 또한 jquery를 사용해 DOM을 변경하여 UI를 개발했던 경험이 있었다. 2018년도 즈음부터 React를 jquery 보다 이용하는 사용자수가 많아졌고 현재는 UI 개발 라이브러리의 흐름이 변경되었다.
jQuery와 React는?
웹은 DOM(Document Object Model)이라는 단위로 구성되어있다. 이 DOM을 동적변경 하기 위해서 웹에서는 API, DOM API를 제공한다. 문제는 DOM API를 다루는 것이 까다롭다.
프론트엔드 UI 개발 라이브러리는 다루기 까다로운 이 DOM API를 쉽게 다룰 수 있게 만들어졌고, 어떻게 잘 다룰 수 있는지가 핵심이라 볼 수 있다.
1) 쉽고 직관적으로 DOM API를 다룰 수있는 jQuery
jQuery는 DOM Selector API로 DOM을 선택하여 특정 이벤트가 발생하면 변화를 주는 방식의 API이다. 하지만 가장 큰 단점 중 하나로 매우 느리다는 것이다.
P 태그를 3줄만 추가하는 예제를 chrome performance로 측정해보면 Javascript는 48ms, jQuery는 1199ms의 소요시간이 나타났다. 단순하게 DOM 선택만 하는 기능인데도 jQuery는 Call tree가 복잡하기 때문에 오랜 시간이 걸린다.
현대의 대규모 동적인 웹사이트는 많은 데이터를 실시간으로 처리한다. 느린 라이브러리를 사용한다는것은 개발 생산성 등 한계가 존재하므로 사용자수가 현저히 낮아지게 되었다.
2) 효과적으로 DOM API를 다루는 React
React에서는 DOM API를 쓸 필요가 없게 되었다.
React 문법에 맞춰 상태(State)만 관리하면, 상태를 기준으로 DOM API는 React가 처리하여 DOM을 렌더링한다.
이와 같은 기능을 어떻게 구현하였는지 React의 핵심 기능 5가지를 알아보자.
- 가상돔(VirtualDom) :
DOM의 형태를 본떠 만든 객체 - JSX(Javascript And Xml) :
익숙한 마크업 문법으로 개발하고 Javscript 컴파일러인 Babel에서 createElement 함수로 변환(transfile)해 주는 역할
/ React 17 버전 부터는 React import 없이도 새로운 JSX Transform 덕분에 JSX 문법을 사용할 수 있다. - 가상돔을 리얼돔으로 렌더링 :
JSX를 활용해 VirtualDOM 을 생성한 후 이 객체를 RealDOM으로 렌더링하려면 DOM API를 사용해야한다. 재귀 호출로 DOM API를 이용해 태그를 생성해준다. - Diffing Update 적용 :
이전에 적용된 Old VirtualDOM과 New VirtualDOM을 비교해 변경된 부분만을 손쉽게 업데이트 할 수 있다. - Hook 구현 :
클래스 컴포넌트같은 경우, 최초로 생성되는 컴포넌트만 새롭게 인스턴스를 만들고, 컴포넌트가 삭제되기 전까지 만들어진 인스턴스를 통해 render 메소드를 이용하여 상태 변경을 감지(setState)한다. 인스턴스에서 필요한 부분만을 업데이트하여 context 상태를 계속 유지할 수 있다. 이미 만들어진 인스턴스를 가지고 render만 호출하는 클래스 컴포넌트와는 다르게, 함수 컴포넌트는 상태가 변경될 때마다 새로운 인스턴스를 생성한다. 이 때문에 컴포넌트가 호출될 때마다 초기화된 상태를 가질 수 있었다. 하지만 16.8 버전부터는 상태(State)를 갖고 유지할 수 있는 hook이 제공되었다.
정리하며
- jQuery는 다루기 까다로운 DOM API를 직관적으로 손쉽게 다룰 수 있는 모델을 제시했다. 하지만, 성능 최적화의 아쉬움과 개발 생산성의 문제가 있었다.
- React는 개발자가 DOM API를 다룰 필요가 없게 만들고, 상태(State)를 기반으로 DOM을 업데이트시켜 준다. 따라서, 충분히 빠른 성능과 개발 생산성에도 효과적인 모델을 제시했다.
- 가상돔은 DOM의 형태를 본떠 만든 객체.
- JSX는 개발자는 익숙한 마크업 문법으로 개발하고, 바벨에서 createElement 함수로 변환해 VirtualDOM을 손쉽게 만들어 준다.
- Diffing Update는 비교적 무거운 RealDOM의 비교가 아닌, 가벼운 VirtualDOM의 비교를 통해 적은 비용으로 충분히 빠르게 UI를 업데이트해준다.
- Hook은 일종의 배열 데이터로, 클로저에 의해 저장된다. React 함수 컴포넌트에서도 상태를 가질 수 있다.
위 내용은 아래 기술 블로그의 참고하여 정리해가며 작성된 글입니다.
Reference
