2020. 6. 26. 08:14ㆍ웹/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 절차
- 데이터를 업데이트하면 전체 UI 를 Virtual DOM 에 리렌더링
- 이전 VIrtual DOM 에 있던 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM 에 적용
참조
리액트를 다루는 기술 (개정판)
'웹 > React' 카테고리의 다른 글
Redux를 사용하는 이유 (0) | 2020.07.02 |
---|---|
Redux 정의 (0) | 2020.07.01 |
SPA(Single Page Application) (0) | 2020.06.30 |