React 란? 무엇인가

React란 페이스북에서 만든 자바스크립트 기반 라이브러리 입니다.

React 공식 홈페이지에서는 아래와 같이 소개 하고 있습니다.

 

A JavaScript Libarary for building user interfaces

유저 인터페이스를 만들기 위한 자바스크립트 라이브러리.

 

React는 라이브러리 이다. 흔히 비교 대상이 되는 Angular는 프레임워크라 하지만 React는 라이브러리이다.

두개는 어떤 차이가 있을까?

 

간단히 설명하면 유저 인터페이스를 만들기 위해 모든 기능을 포함하지 않은 라이브러리는 React이고

모든 기능을 포함하고 있는 프레임워크는 Angular라고 생각하면 됩니다.

 

React가 라이브러리라 불리우지만 걱정하지 않아도 됩니다.

Raact를 프레임워크 급으로 만들어줄 여러가지 방법이 이미 많이 있기 때문이죠.

 

React를 왜 사용 할까?

 

유저 인터페이스. 즉 프론트엔드를 만드는 라이브러리는 상당히 많습니다.

HTML과 CSS 그리고 순수 자바스크립트, Jquery 등 다양한 방법으로 얼마든지 제작이 가능합니다.

하지만 요즘 같은 복잡한 동적인 웹페이지를 만드는 시대에는 다릅니다.

 

각 페이지마다 페이지를 관리해줘야 하며 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 합니다.

그러기 위해선 기존에 방식으로 관리하기는 너무 어렵습니다.

React는 이러한 고민들을 해결해 주기 충분했습니다.

이미 페이스북에서는 자사 인터넷 웹페이지에 적용해 증명을 해 보였으니 말입니다.

요즘은 Airbnb와 Netfilx에서도 React를 사용하면서 React 생태계가 점점 커지고 있습니다.

 

정리하자면 사용자와의 인터렉션을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용합니다.

 

React의 특징은 무엇인가?

 

React는 3가지의 주용한 특징을 지니고 있으며 이는 React를 사용하는 큰 이유입니다.

 

컴포넌트 ( Component )

 

컴포넌트는 UI를 구성하는 개별 단위입니다. UI를 레고 처럼 하나 하나 블럭으로 생각하고 각 페이지 마다 원하는 UI를 조립한다고 생각하면 됩니다. 페이지는 컴포넌트의 조합인셈이죠.

 

UI를 하나의 블럭으로 생각하기 때문에 중복되는 코드가 적어지며 전체 코드를 파악하기 상대적으로 쉽습니다. 또한 UI 변경사항을 반영하는데 상당히 좋습니다.

예를 들면, 전체 페이지에 테이블 요소에 UI 변경이 필요하다면 전체 페이지를 수정 하는 것이 아닌 테이블 컴포넌트 하나를 수정하면 전체 페이지에 반영이 됩니다. 또한, UI 중 테이블에 문제가 있다면 테이블 컴포넌트만 확인해보면 되죠.

 

이 처럼 컴포넌트 구조는 관리 유지 보수 및 개발 하는데 상당한 편의성을 줍니다.

 

단방향 데이터 흐름

 

React는 다른 MVC 구조와 다르게 단방향 데이터 흐름을 지향합니다.

Angular 같은 경우 양방향으로 데이터 변화를 감지하지만 React는 단뱡향 데이터 흐름을 선택했습니다.

단방향 데이터 흐름은 양방향보다 데이터를 감지하는데 부담이 적고 단순한 데이터 흐름으로 이해하기 쉬우며 쉬운 어플리케이션을 만들 수 있습니다.

 

가상(Virtual) DOM

 

가상 돔은 가상의 Document Object Model을 말합니다.

DOM은 HTML 내에 원하는 위치에 접근하기 위한 하나의 방식으로 W3c 표준입니다.

기존의 방식은 DOM 객체의 변화를 감지하면 DOM을 다시 그리는 방식이 였습니다.

DOM을 다시 그리게 되면 브라우저의 리소스를 사용하기 때문에 성능이 이슈가 있었습니다.

 

React는 가상 DOM을 채택하여 성능 이슈를 해결했습니다.가상 DOM은 리액트에서 나온 개념은 아닙니다.

가상 DOM은 HTML DOM을 추상화 하여 실제 DOM과 비교하고 변화된 부분만 업데이트 하는 방식입니다.

이는 브라우저의 리소스를 사용하지 않고 효율적으로 DOM을 업데이트 하게 합니다.

 

요약

 

React는 페이스북이 제작한 Javascript 라이브러리 입니다.

컴포넌트 구조로 UI를 캡슐화 하였으며 단방향 데이터 흐름과 가상 돔을 채택하여 성능 이슈를 해결하였습니다.

가상 돔은 실제 돔과 비교하여 변경 된 부분만 확인하여 실제 돔에 업데이트 하는 방식을 가지고 있습니다.

이는 기존 DOM을 업데이트 하는 구조에서 브라우저의 리소스를 사용하지 않고 업데이트 함으로써 성능 이슈를 해결했습니다.