[React] 리액트의 특징 : SPA와 CSR, Virtual DOM

React는 페이스북에서 개발한, 유저 인터페이스(UI)를 담당하는 자바스크립트 라이브러리 중 하나이다. 리액트는 SPA,  CSR, Virtual DOM 등 몇 가지 대표적인 특징을 가지고 있는데, 이번 시간에는 그 특징들에 대해 정리해보고자 한다.

 

SPA와 CSR

SPA : Single Page Application
CSR : Client Side Rendering

 

SPA는 Single Page Application, 단일 페이지 어플리케이션의 약자이며 MPA(Multiple Page Application)와 반대되는 개념이다. 단 하나의 페이지를 통해 유저의 요청을 처리해 주는 방식이다.

 

그렇다면 리액트에서 어떻게 하나의 페이지로만 웹 어플리케이션을 구성할 수 있을까? 이를 위해 사용되는 방식이 바로 CSR, Client Side Rendering 그리고 컴포넌트이다.

 

Client Side Rendering은 렌더링(화면에 요소들을 보여주는 것)이 유저 측, 즉 클라이언트에서 일어난다.

다중 페이지로 구성된 MPA의 경우 유저의 요청이 발생할 때마다 필요한 리소스를 서버에서 클라이언트로 보내 주는 SSR 방식을 이용하는데, CSR 방식의 경우 렌더링에 필요한 리소스들, 예를 들면 HTML/CSS/JS 그리고 리액트 라이브러리까지도 초기 요청 시에 모두 보내 준다.

 

알다시피 리액트를 통해 만들어진 웹페이지는 컴포넌트들로 화면이 구성된다. 그리고 유저 측에서 발생하는 이벤트에 따라 이러한 컴포넌트들을 동적으로 처리하며 원하는 화면을 구성하는데, 그 때 필요한 코드들을 클라이언트가 초기에 서버로부터 모두 받아오기 때문에 클라이언트가 단 하나의 페이지에서 컴포넌트들을 조작하며 동적으로 화면을 렌더링할수 있는 것이다.

 

정리하자면 리액트는 Server Side Rendering을 통한 MPA 방식을 통해 화면을 렌더링하는 것이 아닌, Client Side Rendering을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식을 사용한다.

 

이러한 리액트의 방식에는 많은 장점이 있다.

1) 전체 페이지를 다시 렌더링하는 것이 아니기 때문에, 일종의 '화면 깜빡임'이 없으며 빠르다.

2) 서버로부터 리소스 요청을 처음에만 하기 때문에, 서버 측에서도 요청 처리에 대한 부담이 적어진다.

 

그러나 화면 구성에 필요한 모든 리소스를 처음에 받아오기 때문에 초기 속도가 SSR에 비해서는 느린 편이며, 리소스 낭비가 이루어질수도 있다는 단점이 존재한다. 특정 링크에 필요한 리소스를 포함한 모든 리소스들을 모두 서버 측에서 초기에 보내 주었는데, 유저가 그 링크에 접속하지 않을 수도 있으니 말이다.

 

Virtual DOM

React 내부적으로 관리하는, 가상의 DOM

 

Virtual DOM Tree를 설명하기 전에, 짧게 DOM이 무엇인지에 대해 아는 선에서 정리해보겠다.

 

---

DOM은 Document Object Model의 약자, 직역하자면 문서 객체 모델이다.

이는 문자 그대로, 문서를 객체의 형태로 표현한 것이라고 볼 수 있다. 객체와 이들을 이어주는 노드를 통해 문서는 최종적으로 트리 구조로 표현된다. 이렇게 DOM을 통해 문서가 트리 형태의 객체로 표현된 구조를 DOM Tree라고 한다.

 

DOM을 통해 문서를 객체화시켜 표현하는 것에는 많은 이점이 있다.

그중 대표적인 것이 바로 문서의 특정 요소에 접근하는 것을 용이하게 해준다는 것인데, JS를 예시로 들어 설명해 보겠다.

우리는 자바스크립트 상에서

document.getElementsByTagName("span");

을 통해 연결된 HTML 상의 모든 <span> 요소들을 가져올 수 있다.

여기서 우리는 document 객체의 getElementsByTagName 함수를 통해 문서의 특정 요소에 접근할 수 있었다. DOM을 통해 HTML 문서가 객체의 형태로 표현되었고, 그 덕에 우리가 문서 자체를 의미하는 document 객체를 사용할 수 있게 된 것이다.

---

기존에 DOM을 통해 문서에 접근하여 특정 요소를 변경하는 것은, 변경된 해당 요소뿐만 아니라 그 부모 요소 전체를 다시 렌더링하는 등의 특징이 있었기에 속도 면에서 비효율적인 측면이 있었다.

때문에 리액트에서는 이를 개선하기 위해 Virtual DOM이라는 가상의 DOM을 만들었고, 변경사항이 생기면 해당 사항을 우선 Virtual DOM에만 적용한 후 이를 실제 DOM과 비교, 결과적으로 변화가 있는 부분만을 재구성하는 방식을 채택하였다.

가상의 DOM을 구성하는 만큼 메모리 사용량은 늘어난다는 단점은 있지만, 덕분에 더욱 빠른 렌더링 속도를 가지게 되었다.

 

틀린 부분이나 부족한 부분이 있을 수 있습니다.
발견 시 댓글로 남겨 주시면 감사하겠습니다!