과거 자바스크립트는 웹 브라우저에서 간단한 연산이나 시각적인 효과를 주는 단순한 스크립트 언어였습니다.
하지만, 현재는 웹 어플리케이션에서 가장 중요한 역할을 하고 있습니다.
최근에는 수 많은 앱들이 자바스크립트를 활용하여 개발되고 있습니다. 하지만 대규모 앱을 개발하기 위해서 순수 자바스크립트만으로 개발하기에는 많은 한계점들이 존재합니다. 그래서 등장한 것이 REACT입니다.
REACT란?
리액트는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리입니다. SPA를 전제로 하고 있으며 Dirty Checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이터 하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 매우 빠른 퍼포먼스를 내는게 가능합니다. 기본적으로 모듈형으로 개발되기 때문에 생산성 또한 상당히 높은 라이브러리라 순식간에 대세로 떠올랐습니다.
REACT가 렌더링 최적화하는 방식
리액트가 작동하는 방식는 어떤 데이터가 변할때마다 기존의 뷰를 날려버리고 처음부터 새로 렌더링하는 방식입니다. 이런 방식은 앱의 구조가 매우 간단하고 작성해야할 코드가 줄어든다는 장점이 있습니다.
그런데 웹 브라우저에서는 이런방식으로 하면 CPU점유율이 늘어나고 메모리 사용도 증가하면서 비효율적이지 않을까요?
이러한 방식에서 리액트가 성능을 아끼고 최적의 사용자 경험을 하는 비밀을 파악하려면 렌더링 방식에 대해서 알아야합니다.
Rendering
사용자 화면에서 view를 보여주는 것을 렌더링이라고 합니다.
render()함수를 통해서 처음에 어떻게 보일지를 정합니다. 이 함수는 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 하고 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다 .
새로운 컴포넌트가 들어가게 되면 컴포넌트들을 재귀적으로 렌더링 합니다.
리액트에서는 뷰를 업데이트할 때 사실 조화과정을 거친다라는 표현을 써야합니다. 뷰를 새로운 요소로 갈아 끼우기 때문이죠.
갈아끼워진 뷰는 render함수가 반환하는 결과를 바로 DOM에 반영하지 않고 이전의 render함수가 만들었던 컴포넌트정보와 현재 render함수가 만든 컴포넌트 정보를 비교합니다.
자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한후, 둘의 차이를 알아내 최소한의 연산으로 업데이트 시키는 것이죠
DOM
dom은 document object model의 약자입니다. 객체로 문서 구조를 표현하는 방법으로 XML또는 html로 작성합니다.
DOM은 수 많은 플랫폼과 웹 브라우저에서 사용하는데 동적 UI에 최적화 되지 않는다는 문제를 가지고 있습니다. 이를 javascript를 통해 동적으로 만들어 주는 겁니다. 하지만 요즘 앱들의 규모가 커지면서 성능 이슈가 발생하고 있습니다.
이러한 문제에 대한 해결책으로 virtualDOM이 등장합니다.
Virtual DOM
virtual dom을 사용하면 실제 dom에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.
리액트에서 웹브라우저에 실제 DOM을 업데이터 할때는 세가지 절차를 통합니다.
1. 데이터를 업데이트하면 전체 UI를 virtual DOM에 리렌더링 합니다.
2. 이전 virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.
리액트 추가 특징
리액트는 프레임워크가 아니라 라이브러리입니다. 프레임워크에서 MVC, MVW등의 구조를 지향하는 것과 달린 리액트는 뷰만 담당합니다.
이러한 부분들에 대해서 router, axios,fetch, redux와 같은 다른 라이브러리들을 사용해서 보완할 수 있습니다.