[React.js] React 란?

React 란? 

• 프론트엔드 프레임워크/라이브러리로,

• 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 하고, 오직 기능 개발 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해서 사용됩니다.

---

알려진 React의 장점은 다음과 같습니다.

• component 기반의 개발방식
• Virtual DOM 을 통한 성능 이점
• 서버와 클라이언트가 같은 코드로 렌더링하는 유니버설 렌더링(universal rendering) 사용 가능

1. component 기반 개발 방식

React를 배우려고 하시는 분들은 대부분 html/css/js 로 뭔가 만들어 보신 경험이 있을 것입니다.
저의 경우 html/css/js 는 진입장벽이 낮았던 이유로 쉽게 입문하게 되었었지만, 졸작 프로젝트 경험을 미루어보아,

• 같은 코드를 반복해서 복붙해야하는 상황이라던지 (재사용성)
• 유지 보수하기에 불편하다.. 코드가 한 뷰에 다 보여져아 하므로..! (유지 보수)
  등.. 의 이유로 불편함을 겪은 적이 있습니다.

따라서, UI를 컴포넌트 계층으로 분리하는 React 는 이러한 불편함을 해소해줄 수 있다고 생각했습니다

2. Virtual DOM 을 통한 성능 이점

React는 Virtual DOM (가상 문서 객체 모델) 을 사용합니다.

먼저 DOM에 대해서 알아야합니다.

 

DOM(Document Object Model)

• Document Object Model, 문서 객체 모델
• 즉, html 문서의 태그들을 Javascript 가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 합니다.
• DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 좁은 의미로 본다면 html에 접근할 수 있는 document 객체와 관련된 객체의 집합을 의미할 수 있습니다.
• 트리라는 자료구조로 되어있습니다.

 

DOM 동작 방식

 

 

 

 

1. DOM Tree 생성
   브라우저가 HTML을 전달받으면 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드(Node)로 이뤄진 트리를 만듭니다. 각 노드는 HTML 엘리먼트들과 연관되어있습니다.

2. Render Tree 생성 이전
   Webkit 에서는 노드의 스타일을 처리하는 과정을 attachment 라고 부르는데, DOM 트리의 모든 노드들은 'attach' 라는 메소드가 있습니다. 이 메소드는 스타일 정보를 계산해서 객체 형태로 반환합니다. 이 과정은 동기적 작업이고, DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행됩니다. Render Tree를 만드는 과정에서는 각 요소들의 스타일이 계산되고 또, 이 계산 과정에서 다른 요소들의 스타일 속송들을 참조합니다.

3. Render Tree 생성
   외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱하여, 스타일 정보를 사용하여 DOM 트리에 따라 새로운 트리, Render Tree 를 만듭니다.

4. Layout
   각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어집니다.

5. Painting
   렌더링 된 요소들에 색을 입히는 과정.
   트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출합니다. 그러고 나면, 스크린에 원하는 정보가 나타나게 됩니다.

왜 Virtual DOM을 사용할까요?

• DOM의 연산횟수를 줄여주므로서, 성능 향상에 효과를 발휘합니다.
• 특히, 복잡한 SPA에서는 데이터가 바뀔 때 마다 다시 렌더링 되어야하는데, DOM 대신 Virtual DOM이 대신 연산해주고 마지막 결과값만 DOM에게 던져줘서 한번의 연산만 하면 되도록 합니다.

DOM에 변화가 생기면, Render Tree를 재생성하고 (모든 요소들의 스타일이 다시 계산됩니다.) 레이아웃을 만들고 페인팅을 하는 과정을 다시 반복하게 됩니다.

복잡한 SPA 에서는 데이터가 바뀔때마다 다시 렌더링 되어야하고 그때마다 DOM 조작이 일어나야 하므로 DOM조작이 많이 발생합니다.
그 변화를 적용하기 위해서 브라우저가 많은 연산을 하게 된다는 것이고 전체적인 프로세스를 비효율적으로 만듭니다.

이때 Virtual DOM이 데이터가 렌더링될 때마다 연산과정을 해주고 마지막으로 DOM은 그 결과를 사용하기만 하면 되므로, 한번의 연산만 하면 됩니다. 이는 엄청난 성능적 개선을 도와주게됩니다.

예를 들어, 30개의 노드를 하나 하나 수정하면, 30번의 레이아웃 재계산과 30번의 리렌더링 등을 하게 되는데, 변화가 일어나면 그걸 오프라인 DOM(렌더링 되지 않은 DOM, virtual DOM)트리에 적용시킵니다. 이 DOM트리는 렌더링 되지 않기 때문에 연산 비용도 적습니다.
최종적인 변화를 실제 DOM에게 던져주면 딱 한번의 렌더링이 일어나게 됩니다.

[참조]
DOM 동작 방식 및 Virtual DOM

3. 유니버설 렌더링(universal rendering)

• 서버-사이드 렌더링과 클라이언트-사이드 렌더링을 동시에 지원하는 것입니다.
• 화면 포현 로직이 양쪽 모두에서 실행되는 것

서버-사이드 (server-side) 렌더링

• 전통적인 방식의 렌더링으로 사용자의 웹 브라우저에서 표현할 정보를 서버에서 HTML 형태로 작성하여 전송한다.
• 즉, 화면 표현에 관한 로직이 서버측에서 실행된다.

클라이언트-사이드 (client-side) 렌더링

• 웹 어플리케이션에서 많이 사용되는 형태로 서버에서는 JSON 또는 HTML 형태의 부분 데이터만 전달 받고, 사용자의 웹 브라우저에서 자바스크립트를 사용해 화면을 렌더링한다.
• 즉, 화면 표현에 관한 로직이 클라이언트 측에서 실행된다.

[참고]
universal rendering