[React] React에 대해 알아보자! (SPA,Virtual DOM,CSR)

728x90

React의 개념 : UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리

 

1. 주로 single page application을 만들 때 사용 된다.

여기서 SPA란?

- 말 그대로 하나의 페이지를 사용하는 어플리케이션 
- 점점 웹사이트가 발전하고 고도화됨에 따라 한페이지에 들어가는 데이터량이 커졌고 매번 서버로부터 새로운 페이지를 가져오는게 버거워 졌다.
- 서버로부터 새로운 페이지를 가져오는것이 아닌 하나의 페이지에서 내용을 동적으로 변경하는 사용자 웹앱을 의미한다

SPA의 구현 방식
- 대표적인게 Ajax를 통한 콘텐츠 로드이다. 페이지 새로고침 없이 데이터가 교환되고 업데이트되는 것이다.
- form 작성시 Ajax를 이용해서 form 데이터 일부를 전송하는데 그럼 서버는 JSON방식으로 응답을 보내주는 식이다.
- 이렇듯 SPA는 화면 이동시 필요한 데이터를 서버로부터 JSON형식으로 전달 받아 동적으로 렌더링한다.

SPA는 컴포넌트 개념으로 작성된 페이지에 특히 적합한데, React를 사용해서 페이지가 컴포넌트 조각들로 이루어진 페이지일 경우 컴포넌트 내용 혹은 컴포넌트 자체를 교환하면 되기 때문에 SPA가 특히 좋다

2.  리액트의 장점에는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시킨다.

리액트의 장점 중 하나는 빠르다는 점인데, virtual DOM을 이용해 보다 효율적으로 원하는 페이지를 브라우저에 빠르게 그려주기 때문이다.

여기서 virtual DOM(Document Object Model) 이란?

DOM의 개념
Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데 브라우저는 이를 분석해 페이지를 띄운다.
DOM이란 이런  Element(HTML)들을 tree형태로 표현한 것을 나타낸것이다.

DOM tree 안에는 각 element들에 해당하는 노드들이 있다.

 

Virtual DOM이 생겨난 배경
화면의 내용,스타일,컬러 등을 수정할 때에는 DOM의 API 를 통해 DOM구조에 접근해서 직접적으로 브라우저를 수정한다.
하지만 이 작업이 여러개 쌓이다보면 무거운 작업이 되기 때문에 이 점을 보완하기 위해서 Virtual DOM를 사용한다.
Virtual DOM 이란 DOM을 복사한 것으로  Element와 속성들을 다 공유한다. 그러나 DOM과 다르게 브라우저 화면의 UI를 조작할 수 있게 해주는 API가 없다.
가상돔은 자바스크립트 객체 형태로 메모리에 저장되며 직접적으로 브라우저에 접근해서 수정하는 것이 불가능하다. 
따라서 가상돔에 접근해서 수정하는 것은 매우 가볍고 빠른 작업이 된다.

 

리액트에서의 Virtual DOM

리액트에서는 이러한 가상돔을 잘 활용해서 성능을 높였는데 항상 두개의 가상돔을 가지고 있다.

렌더링을 기점으로 하나는 1. 렌더링 이전의 화면구조를 나타내는 가상돔이고 하나는 2. 렌더링 이후 변화한 화면의 가상돔이다.

Diffing

리액트는 State에 변경사항이 있을 때 마다 Re-Rendering을 하는데 이 시점마다 새로운 브라우저가 만들어지기 이전에 새로운 내용이 담긴 가상돔을 만들어낸다.

이렇게 렌더링되기 이전의 가상돔과 렌더링된 이후의 가상돔을 사이에서 정확히 어떤 element들만 변화했는지 비교하는 Diffing과정을 거친다.

Reciliation(재조정)
diffing을 통해 차이가 발생한 부분만 브라우저상의 실제 DOM에 적용한다.

Batch Update
Recilication(재조정) 과정이 효율적인 이유는 batch update덕분이다. 이는 변경된 모든 Element를 집단화해서 한번에 실제 DOM에서 수정하는 것이다. 하나하나 바뀔때마다 수정하는 것이 아닌 한꺼번에 딱 한번 수정하다는 점이 효율적이라고 볼 수 있다.

 

3. 리액트는 클라이언트 사이드 렌더링이 가능하다.

Client Side Rendering(CSR) 이란?

SPA에서 주로 차용하는 렌더링 기법으로 클라이언트측에서 렌더링하는 방식이다.
처음에 한번만 다운로드하고 이후 새로운 페이지 요청에 데이터만 갱신해서 해결한다.

동작 원리

유저가 웹사이트에 방문 -> 브라우저가 서버에 콘텐츠 요청 -> 빈 HTML을 response로 보냄 -> 브라우저가 연결된 js 링크를 통해 서버에서 js 다운로드 (동적으로 DOM생성) -> 브라우저에 렌더링

- 브라우저가 js 다운로드와 동적 DOM을 생성하기 위해 초기 로딩 시간이 길다.
- 하지만 이후 request에 따라 필요한 데이터만 서버에서 response로 받아오면 되니 구동속도는 매우 빠른편
- 화면 깜박임이 없음
- 서버부하가 적고 UX가 쾌적하다

- CSR은 검색엔진 최적화에 불리하다는 단점 : 브라우저가 가진 웹 크롤러가 HTML을 읽어 검색 가능한 색인을 불러오는데 웹 클롤러봇 입장에서는 CSR에서 HTML이 비어있음

 

4. 다른 프레임워크와도 사용이 가능하다

 

5. 컴포넌트의 가독성을 높이며 유지보수가 쉽다.

컴포넌트란?
재사용이 가능한 각각 독립된 모듈을 작은 블록단위로 조립하듯이 페이지를 구성하는 방식
캡슐화,확장성,결합성,재사용성과 같은 이점이 있다.