React는 다른 프론트엔드 프레임워크에 비해 어떤 이점이 있을까?

 

프론트엔드 라이브러리/프레임워크로 React를 사용할 경우 다른 프론트엔드 프레임워크에 비해 어떤 이점이 있을지 조사하고 있다. 먼저 React의 주된 특징에 대해 살펴보면서, 각 특징에 대해 현재 React 외에 가장 널리 쓰인다고 알려진 Angular, Vue.js와 비교를 진행했다.

 

 

컴포넌트 기반의 개발

React는 UI를 각각의 컴포넌트로 나타내며, 컴포넌트의 형식으로는 XML 포맷의 Template에 JavaScript를 직접 내장시킨 JSX 형식을 사용한다. Template이 JavaScript 문법을 적극적으로 차용하는 형태로, 로직을 표현하는 방식이 자유롭고 손쉬운 코드 재사용이 가능하다는 특징이 있다.

 

Vue.js 역시 컴포넌트를 이용하나 컴포넌트의 Template을 HTML 마크업을 기반으로 하는 문법을 적용하며, 하나의 컴포넌트 내에서 HTML, Script, CSS의 영역을 분리해 적용한다. Angular에서는 컴포넌트의 UI 부분은 HTML 태그와 속성으로, 동작 부분은 JavaScript로 분리된다. 

 

 

가상 DOM 이용

React는 가상 DOM에 실제 React 컴포넌트들을 구성하는 DOM Tree를 Mapping한다. 렌더링 시 가상 DOM 내의 변경사항을 추적해 Mapping된 실제 DOM 상의 특정 요소만 업데이트하고, 전체 Tree에서 변경되지 않은 다른 부분에는 영향이 가지 않도록 한다. 이를 통해 한 요소에서만 변경이 발생하더라도 전체 Tree 구조를 모두 업데이트하는 전통적인 DOM 방식에 비해 렌더링 성능에서 우위를 가질 수 있다.

 

Vue.js는 React와 마찬가지로 렌더링에 가상 DOM을 활용하며, Angular는 데이터가 변경되는 시점에 DOM 트리를 만들어 업데이트하는 Incremental DOM 방식을 사용한다.

 

가상 DOM을 이용하는 방식은 DOM Tree에서 필요한 부분만 렌더링하기 때문에 속도 측면에서 우월성을 가질 수 있고, Incremental DOM 방식은 가상 DOM이 필요하지 않고 DOM node가 추가되거나 삭제될 때만 메모리를 할당하기 때문에 메모리 사용 측면에서 이점을 가질 수 있다.

 

 

단방향 데이터 바인딩

React를 사용할 때 Flux Architecture에 맞추어 단방향으로 데이터가 전달되도록 하는 구조를 따를 수 있다.

 

 

View에 해당하는 UI에서 Action이 발생하면 Store, 혹은 그 상위의 대상에 해당하는 Model이 자신의 상태를 변경한다. 이렇게 Model의 상태가 변경되는 때에만 View를 변경하도록 하는 구조를 확인할 수 있다. 단방향 데이터 바인딩이 이루어질 경우 소스코드의 상태 변화에 따른 변화의 예측 가능성이 높아 코드 구조가 안정적이게 된다는 이점이 있다.

 

Vue.js의 경우 데이터의 변화를 감지해 Template과 결합해 화면을 갱신하거나, 화면의 입력에 따라 데이터를 갱신해 View와 Model의 데이터를 일치시키는 양방향 데이터 바인딩 방식을 사용한다. 

 

 

 

웹 프론트엔드 기술 스택으로 React가 사용되어야 하는 이유?