React.js

React 란 ?

React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리, 즉 프론트엔드 라이브러리 이다.

 

React 를 사용하는 이유

웹페이지를 만들기 위해 굳이 라이브러리나 프레임워크를 사용해야 할 필요는 없다.

HTML 과 CSS, 순수 자바스크립트 만으로도 웹페이지를 얼마든지 제작할 수 있다.

특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브러리는 큰 이득이 되지 못한다.

 

하지만 요즘의 웹은 정적이고 단순한 페이지가 아니다.

 

웹앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이다. 

이런 웹 어플리케이션에서 UI 를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다.

만약 프로젝트 규모가 크고 다양한 UI와 상효작용이 필요하다면 DOM 요소 하나하나를 직접 관리하는것은 힘든일이다.

또, 복잡하게 늘어진 코드를 보수하는 것도 점점 힘들어지게 된다.

 

React를 사용하면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있다.

기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있다.

또한 SPA(Single Page Application)이므로 브라우저 전체를 새로고침 하지 않고도 컨텐츠를 빠르게 변경할 수 있다.

 

 

React 의 특징

1. JUST THE UI

React 는 UI 컴포넌트를 만들기 위한 라이브러리이다.

컴포넌트 지향 프레임워크는 여러가지가 있지만(Angular.js, Vue.js, ...) React 는 UI컴포넌트만 지원한다.

Backbone.js 의 뷰 부분을 React.js로 구현하거나 Angular.js 의 directives를 React 로 구현하는 등 

여러 환경과 조합해 사용할 수 있다.

 

2. VIRTUAL DOM

React 는 자바스크립트 내에 DOM Tree와 같은 구조체를 VIRTUAL DOM으로 갖고 있다.

다시 그릴 때는 그 구조체의 전후 상태를 비교하여 변경이 필요한 최소한의 요소만 실제 DOM에 반영한다.

따라서 무작위로 다시 그려도 변경에 필요한 최소한의 DOM만 갱신되기 때문에 페이지 향상된 렌더링 속도를 가진다.

 

복잡한 SPA에서는 DOM 조작이 많이 발생하는데, 그 때마다 브라우저가 연산을 해야하므로 전체적인 프로세스가 비효율적으로 되기 쉽다.

하지만 VIRTUAL DOM을 사용하면 실제 DOM에 적용시키기 전 가상의 DOM 을 만들어 적용시키고, 최종완성된 결과만을 실제 DOM으로 전달한다. 이를통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 좋은 성능을 가지게 된다. 

VIRTUAL DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다.

 

3. Component 기반 구조

React 는 UI를 여러 컴포넌트로 쪼개서 만든다.

여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해서 사용하면된다.

또, 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다.

 

4. DATA FLOW

React 는 단방향 데이터 흐름을 지향한다. (FLUX)

어플리케이션의 데이터를 관리하는 면에 있어서 단순하기 때문에 이해하고 관리하기 쉬운 애플리케이션을 만들 수 있다.

 

5. JSX

React 는 JSX 라고 하는 XML 과 비슷한 문법을 이용할 수 있다.

JSX는 페이스북에서 스펙을 정의한 ECMAScript 친화적인 XML 스러운 문법이다.

 

 

React는 정적인 사이트보다는 동적인 사이트에 어울린다.

사이트의 규모가 커지고 동적인 요소가 많아지면 단순 자바스크립트나, jQuery로 상태(state)를 모두 관리하는 것은 거의 불가능에 가까워진다.

 

예를들어 Netflix는 수많은 영상을 가지고 있고, 각 영상별로 특정 사용자의 취향과 일치할 확률을 계산한다.

이를 바탕으로 사용자가 선호할 영상들을 우선적으로 리스트업해서 보여준다.

즉, 사용자마다 전부다른 '개인화' 된 페이지를 가지게 된다.

이처럼 복잡한 상태들을 jQuery로 전부관리한다는것은 엄청나게 비효율 적이다. 유지보수가 어렵고 버그를 야기한다.

 

반면 React 를 사용하면 Redux 등의 상태관리 도구를 이용해 상태를 모아 관리할 수 있다.

또, Component에 data가 흘러들어가 개인화 된 웹페이지를 생성하게 되는 방식으로 플로우가 이해하기 쉽고 직관적이다.

 

예시처럼 React 는 프로젝트가 복잡하고 동적일수록 빛을 발한다.

 

 

참고한 글

https://valuefactory.tistory.com/544

React란 무엇인가

https://blog.coderifleman.com/2015/06/23/learning-react-1/

React.js를 이해하다(1)