React 개념과 특징

React

• 오직 View 만 신경쓰는 라이브러리

• 초기 렌더링과 리렌더링 과정을 통해 데이터가 변할 때마다 새롭게 랜더링하면서 성능을 아끼고 최적의 사용자 경험을 제공(Virtual DOM)
  
  ※ 라이브러리 
  다른 웹 프레임워크의 경우 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하는 반면, 리엑트는 뷰만 신경 쓰는 라이브러리이기 때문에 직접 필요한 기능은 구현해서 사용
  이미 제공되는 라이브러리가 많음

 

 

초기 렌더링

• Render 함수 사용

• Render 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 가진 객체를 반환

• Render 함수 실행 시 내부에 존재하는 컴포넌트들은 재귀적으로 렌더링

• 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM 요소안에 주입
  
  ※ 컴포넌트
  리엑트에서 컴포넌트란 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의

 

 

리렌더링

• Render 함수 사용

• 컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render 함수를 다시 호출

• Render 함수가 반환하는 결과를 DOM 에 바로 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 비교 후 DOM 트리 업데이트

• 루트 노드부터 시작하여 전체 컴포넌트를 처음 부터 다시 렌더링 하는 것처럼 보이지만, 실제 바뀐 부분만 DOM 에 적용

 

 

Virtual DOM

• HTML 은 자체적으로 정적이며 동적 UI 에 최적화되어 있지 않음

• 자바스크립트를 이용하여 동적 생성 시 성능 이슈 발생

  EX) 페이스북, 트위터 등 스크롤을 이용한 페이지 구현 시 동적으로 생성, 규모카 큰 웹 어플리케이션에서 DOM 에 직접 접근하여 변화를 주다보면 성능 이슈 발생

• DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM 에 변화를 일으키면 웹 브라우저가 CSS 를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트, 이 과정에서 시간이 상당히 소요

• 리엑트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행

• DOM 에 직접 전근하여 조작하는 대신, 추상화한 자바스크립트 객체를 구성하여 사용

• 업데이트의 간결성 

 

 

Virtual DOM 절차

 

1. 데이터를 업데이트하면 전체 UI 를 Virtual DOM 에 리렌더링
2. 이전 VIrtual DOM 에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM 에 적용

 

 

 

 

 

 

참조

리액트를 다루는 기술 (개정판)