React Study - 1. Why React?

리액트란?

- UI를 랜더링하기 위한 자바스크립트 라이브러리이다. - 공식문서

 

리액트를 설명하기에 앞서 대부분의 자바스크립트 기반의 프레임워크는

MVC(model-view-controller), MVVM(model-view-view-modal) 아키텍쳐를 사용한다.

여기서 모델은 데이터를 직접관리하는 영역 / 뷰는 사용자에게 보이는 영역 / 컨트롤러는 모델 데이터 조회, 수정, 변경된 사항을 뷰에 반영하는 영역이다.

 

일반적으로는 사용자의 어떤 행위가 발생하면 컨트롤러를 통해 뷰를 수정한다.

어떤 데이터가 변할 때마다 어디가 변했는지를 확인하는 것보다 그냥 아예 뷰를 갈아끼우는 방법을 고안한 것이 바로 리액트이다.

리액트는 정해진 규칙에 따라 뷰를 새로 렌더링하기로 한 오직 뷰(View) 만 신경쓰는 라이브러리이다.

 

리액트는 다양한 독립적인(isolated) UI 컴포넌트로 구성되어 있다. 재사용 가능한 API로 여러 기능들을 내장하고 있으며, 

작은 단위의 컴포넌트들이 모여서 웹 뷰를 구성할 수 있게 되는 것이다.

 

1.1 초기 렌더링

먼저, 렌더링이랑 사용자 화면에 뷰를 보여주는 것을 의미한다.

초기 렌더링은 첫 화면을 띄우는 것을 의미하여, 여러 프레임워크나 라이브러리에서 이를 위한 내장 함수가 있는데, 리액트에서는 "render( )"함수가 그 역할을 수행한다.

 

render 함수가 실행되면, 내부 컴포넌트도 재귀적으로 렌더링이 되며,이 때 바로 HTML 을 파싱하는 것이 아니라, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 최상위 컴포넌트의 렌더링 작업이 끝나면 이 정보들을 조합해서 HTML 마크업을 만들고, DOM에 주입한다.

 

1.2 리액트에서의 뷰(View) 업데이트

컴포넌트에서 데이터 변화가 생기면 새로운 뷰로 갈아끼운다. 이 작업을 render 함수가 수행하며, 변화된 값만 업데이트 하는 것이 아닌 새로운 데이터를 가지고 render 함수를 재호출하여 rerendering(리렌더링)(=뷰를 다시 그린다) 하는 과정을 거친다. 

 

그런데 리액트는 바로 HTML에 반영하지 않는다고 했다. 먼저 정보를 반환한다고 했는데, 뷰를 다시 그렸을 때의 정보와 이전 정보를 비교한다.

 

파란색 동그라미가 변경사항이 있는 노드이다.

 

그리고 변경된 부분만 확인하고 DOM트리를 업데이트한다. 결국에는 자원 낭비를 최소화하여 업데이트를 하는 셈이다.

 

1.3 가상 돔(Virtual DOM)

먼저 DOM(Document Object Model) 이란 문서 구조를 표현하는 객체 모델로 주로 XML, HTML로 작성한다.

DOM을 활용하여 객체에 Javascript, CSS를 적용하고 특정 노드에 변화를 준다. 그런데 이 DOM은 동적 변화에 최적화되어 있지 않다. 우리가 흔히  HTML을 정적파일이라고 생각하는 것이 바로 그 이유다.

 

요즘 최신 UI를 살펴보면 동적으로 데이터를 불러오는 일을 자주 볼 수 있다. 예를 들면, 무한 스크롤이나 이벤트가 발생할 수록 다음 플로우로 넘어가면서 데이터가 계속적으로 노출되는 것들이 있다. 규모가 큰 어플리케이션일 수록 DOM에 직접 접근하여 변화를 줄게 될 경우 성능 이슈가 발생하는 것은 어쩌면 자연스러운 현상일 것이다.

 

이는 DOM 자체가 느려진다는 의미와는 약간 다르다. DOM 자체는 빠르지만, 웹 브라우저에서 DOM의 변화가 발생하면 처음 부터 다시 그리는 리페인트(repaint) 과정을 거치면서 CSS를 다시 연산하고 레이아웃을 구성하는 과정을 거치게 되는데, 이 과정이 많아지게 되므로 느려진다는 의미이다.

 

웹 브라우저의 역할이 HTML을 시각적으로 보여주는 것이기 때문에 컴퓨터 자원(CPU, 메모리 등)를 사용하는 것은 어쩔 수 없지만 DOM을 조작할 때마다 새로 웹 페이지를 그리는 과정이 반복되기 때문에 데이터가 많으면 많을수록 부담 될 수 밖에 없다.

페이스북 팀에서는 이를 해결하기 위해 "가상 돔(Virtual DOM)" 이라는 개념을 고안한다.

리액트는 Virtual DOM을 사용해서 DOM 의 업데이트를 추상화하여 업데이트 횟수를 최소화한다.

 

앞서 설명한 내용을 다시 정리해보자면, 리액트에서 실제 DOM을 업데이트하는 과정은 다음의 세 가지 절차를 거친다.

 

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM(가상돔)에 리렌더링한다.

2. 이전에 가상 돔 트리에 있던 내용과 새롭게 업데이트 된 가상 돔 트리를 비교한다.

3. 비교해서 변경사항이 있는 노드만 실제 DOM 에 반영한다.

 

명심하자. Virtual DOM의 역할은 업데이트 처리를 간결화해서 효율성을 높이는 것에 있다.

 

 

 

 

 

 

ㅡ 본 글은 리액트를 다루는 기술 도서와 리액트 공식 문서를 참고하여 작성한 글입니다. ㅡ