React

React

# 시작하며

현재 자바스크립트는 많은 개발자들에게 사용되고 있으며, 웹 애플리케이션에서 핵심적인 역할을 차지하고 있다. 또한 서버사이드와 모바일, 데스크톱 애플리케이션(Slack, Atom, VS Code)에서도 활약하고 있다. 이렇게 확장되는 범위 속에서, 규모가 큰 애플리케이션을 프론트엔드 사이드에서 관리하려면, 다양한 프레임워크(Vue.js, Angular, Backbone.js 등)의 사용이 필요하다. 

 

프레임워크들은 주로 MVC, MVVM 아키텍처를 주로 사용한다. 이와 같은 프레임워크는 공통적으로 애플리케이션에서 사용하는 데이터를 관리하는 영역인 Model과 사용자에게 보이는 부분인 View를 가진다. 프로그램이 사용자에게 어떠한 작업을 입력받으면, 컨트롤러는 해당 모델의 데이터를 조회 및 수정하여 변경 사항을 뷰에 반영하게 된다.

 

하지만 작업을 입력받아 업데이트하는 과정에서, 항목에 따라 변경 부분을 찾는 것은 간단하지만, 규모가 큰 프로젝트라면 상당히 복잡해진다. 따라서 페이스북에서 이러한 문제를 해결하기 위해, 데이터가 변화할 때마다 어떠한 변화를 줄지 고민하는 것이 아닌, 기존 View를 날려 버리고 처음부터 새로 rendering 하는 방식을 고안했다. 해당 방법을 사용하면 더 이상 변화에 대한 신경을 쓸 필요가 없어지고 단순히 View가 어떻게 생길지 선언하면서 새로 rendering만 하면 되는 것이다. 

 

이러한 방법 역시 CPU 점유율을 많이 차지하고 메모리 사용이 늘어나는 것은 동일하다. 따라서 최대한의 성능을 보존하고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 React이다.

 

 

# React

리액트는 자바스크립트 라이브러리로, user interface를 만드는 데 사용한다. 앞서 언급했던 프레임워크인 MVC, MVVM 아키텍처와 다르게, 오직 View만 신경 쓰는 라이브러리이다. 

리액트에서는 Component를 사용한다. 해당 Component는 프로젝트에서 특정 부분이 어떻게 생길지 결정하는 선언체로서, 재사용 가능한 API로서 수많은 기능을 내장하고 있다. Component 하나에서 생김새와 작동 방식을 정의한다. 그렇다면 계속에서 언급되는 rendering은 무엇일까? 사용자 화면에 View를 보여주는 것을 바로 rendering이라고 한다. 리액트에서는 컴포넌트가 최초 실행한 초기 렌더링과 데이터 변경으로 다시 실행하는 리렌더링으로 최적의 사용자 경험을 제공할 수 있다.

 

• 초기 렌더링

어떠한 UI 관련 라이브러리를 사용하던 처음 화면을 보여주는 초기 렌더링은 필수적이다. 이를 위해 리액트에서는 render를 사용한다. 

render() {...}

해당 함수는 컴포넌트가 어떻게 생겼는지 정의한다. View의 생김새와 작동법에 대한 정보를 지닌 객체를 반환한다. 더욱이 컴포넌트는 중첩되어 사용이 가능한데, render를 사용하여 내부에 있는 컴포넌트도 재귀적으로 rendering 하는 것이 가능하다. 이렇게 상위 컴포넌트의 rendering이 끝나면, 가진 정보를 사용하여 HTML 마크업을 만들어 우리가 정한 실제 페이지 DOM 요소 안에 주입하는 것이다.

 

• re-rendering

프로젝트를 진행하면서 빼놓을 수 없는 부분은 바로 업데이트이다. 리액트에서 view를 업데이트할 때는 업데이트를 한다라고 하기보다는, 조화 과정(reconciliation)을 거친다라고 하는 것이 더 정확하다. Component에서 데이터 변화가 발생했을 때, 뷰가 변형되는 것이 아니라 새로운 요소로 교체되기 때문이다.

해당 작업 역시 render 함수가 수행한다. render는 view의 생김새와 작동을 반환하는데, Component는 업데이트 시 새로운 데이터를 가지고 render 함수를 다시 한번 호출한다. 그렇게 하면 해당 데이터를 지닌 view를 생성하게 되는 것이다. 하지만 해당 반환 결과를 바로 DOM에 반영하지는 않고, 이전 render 정보와 현재 render Component 정보를 비교한다. 이러한 최소 연산을 통한 비교로 업데이트될 DOM node를 알아내 DOM 트리를 업데이트한다.

 

 

# Virtual DOM

리액트의 주요 특징 중 하나가 바로 해당 Virtual DOM을 사용하는 것이다. 

 

• DOM이란?

그렇다면 앞서 계속해서 언급되는 DOM이란 무엇일까? DOM은 Document Object Model의 약어로, 객체로 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성되고 웹 브라우저는 DOM을 활용해 객체에 JS와 CSS를 적용한다. 

이러한 DOM API를 많이 사용하지만, 동적 UI에 최적화되어 있지 않아 JS를 통해 이를 동적으로 만든다. DOM을 조작할 때, 웹 페이지를 새로 그리기 때문에 잦은 업데이트로 성능 저하가 발생할 수 있다. 따라서 DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선이 필요한데, 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로 DOM 처리 횟수를 최소화한다.

 

• Virtual DOM

Virtual DOM을 사용하면, 실제 DOM에 접근하여 조작하는 것이 아니라 추상화한 JS객체를 구성하여 사용한다. 이후 리액트에서 데이터 변화로 인한 실제 DOM을 업데이트할 때는 해당 절차를 통해 진행한다.

 

1. 데이터 업데이트

2. 전체 UI, Virtual DOM에 re-rendering

3. 이전 Virtual DOM과 현재 VIrtual DOM 비교

4. 변경 부분만 실제 DOM에 적용

 

리액트는 오직 view만 담당한다. 리액트는 프레임워크가 아닌 라이브러리이기 때문에 Ajax, 데이터 모델링, 라우팅과 같은 기능이 없어 직접 구현하여 사용해야 한다. 따라서 라우팅에는 react-router, Ajax는 axios, fetch, 상태 관리는 redux, MobX를 사용하여 보완한다.

 

 

# 시작하기

리액트 프로젝트를 시작하기 위해서는 Node.js를 먼저 설치해야 한다. Node.js는 크롬 V8 JS 엔진으로 빌드한 JS 런타임으로, 이를 통해 웹 브라우저 환경이 아닌 곳에서도 JS를 활용한 연산이 가능하다. 프로젝트를 개발하는 주요 도구들이 Node.js를 사용하며, 해당 도구에는 babel, webpack 등이 있다. 

 

Node.js를 설치하면 패키지 매니저 도구인 npm이 설치된다. 해당 npm으로 수많은 개발자가 만든 패키지를 설치하고 버전을 관리할 수 있다.