리액트는 어떤 데이터가 변할 때마다 어떤 변화를 줄 지 고민하는 것이 아닌 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용한다. 하지만 DOM은 느릴뿐더러 CPU 점유율도 늘어날 것이다. 리액트는 어떤 방식으로 이 과정을 빠르게 수행할 수 있을까?
- 리액트의 이해
리액트는 오직 V (view)만 신경쓰는 라이브러리 입니다.
리액트 내에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 합니다.
( 컴포넌트 : 재사용이 가능한 API로 수많은 기능들을 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함 )
- 초기 렌더링과 리렌더링
리액트는 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 이 존재합니다.
- 초기 렌더링
초기 렌더링은 render 함수를 이용합니다.
render() : 뷰, 작동 정보를 지닌 객체를 반환하여 컴포넌트를 재귀적으로 렌더링함, 이 정보로 html 마크업을 생성, DOM에 주입함
- 리렌더링
리렌더링 또한 render 함수를 이용합니다. 새로운 데이터를 가지고 render 함수를 호출하면 컴포넌트는 그 데이터를 지닌 뷰를 생성합니다.
=> 기존 DOM 트리(가상 DOM) 와 새로운 DOM 트리를 비교한 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 합니다.
- 리액트의 특징
리액트의 가장 큰 특징은 Virtual DOM을 사용한다는 것입니다.
먼저 DOM의 구성을 살펴보죠.
DOM이란 Document Object Model의 약어로 객체를 문서구조로 표현합니다. XML이나 HTML로 작성합니다.
DOM은 트리구조로 특정노드를 찾거나 수정, 삭제, 추가가 가능합니다.
DOM에는 치명적인 약점이 존재합니다. 바로 정적인 구조라는 것이죠. 이를 우리는 자바스크립트를 이용해 동적으로 구현합니다.
DOM자체의 성능은 문제가 없으나 정적인 돔을 업데이트 할 때 문제가 생깁니다.
DOM이 변경되면 웹 브라우저가 css를 다시 연산하고, 레이아웃을 구성하고 페이지를 리페인트하죠. 이러한 과정에서 시간이 소요되는 것입니다.
이러한 DOM을 부분적으로만 업데이트한다면 시간을 줄일 수 있을것입니다.
이러한 개념에서 나온 것이 Virtual DOM 방식입니다.
리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 최소화합니다.
데이터 업데이트가 발생하면 리액트는 우선 현재 DOM을 Virtual DOM에 리렌더링합니다.
리렌더링된 Virtual DOM과 이전에 있던 Virtual DOM 을 비교하여 변경된 부분만 실제 DOM에 적용하는 순서입니다.
리액트는 이렇게 업데이트 처리 간결성을 제공합니다.
- 기타 특징
리액트는 프레임워크가 아닌 라이브러리이기 때문에 라우팅, ajax, 상태관리를 직접 만들어야 합니다.
이러한 기능들은 다른 개발자가 구현해 놓은 라이브러리를 사용하면 됩니다.
어떻게 보면 장점이자 단점이죠..
주로 라우팅에는 리액트 라우터, ajax에는 axios 나 fetch, 상태관리는 redux나 MobX를 사용합니다.
이렇게 리액트의 기본 구성이나 특징에 대해 알아보았습니다.