이전 블로그에서 다루었던 React에 관련된 내용을 다시 옮깁니다.

Facebook에서 만든 오픈소스 라이브러리 "React"에 관하여 포스팅 하고자 합니다.

1. React.js?

React는 Facebook에서 내부적으로 개발하여 2013년에 오픈소스로 런칭한 javascript 라이브러리입니다. Facebook은 자체적으로 XHP를 사용하는 등 PHP를 사용하여 개발을 했습니다. PHP의 장점이라면, 각각의 기능을 컴포넌트화 하여 코드의 가독성 및 재사용을 진작시킬 수 있지만, 요청을 하면 서버에서 코드를 받아와서 렌더링을 해줘야 하는 것들 때문에, 사용자 경험면에서는 부족한 면들이 생겼습니다.

2. javascript Framework의 발전

이러한 단점을 극복하고자, javascript는 DOM 객체 및 Ajax를 통한 데이터 통신 및 데이터 바인딩을 꾀할 수 있는 프레임워크들이 나오기 시작했습니다. 대표적인 예로 Angular js, Backbone js 등입니다. 즉, 하나의 페이지에서 리소스들을 다룰 수 있는 SPA(Single Page Application)이 인기를 얻으면서, javascript로의 어플리케이션 개발 기술들은 발전하기 시작했습니다.

이러한 javascript framework의 기본적인 개념은 data를 받아오고, 기존에 렌더링 되어있던 data들과의 비교를 통해서 전체 DOM 객체를 비동기적으로 갱신해 줌으로써 서버에서 직접 소스코드를 받아와 렌더링 해줌으로써 리프레시가 되는 부분들 없이, 사용자 경험적으로 좀더 좋은 UX를 제공해 줄 수 있게 되었습니다.

3. React는 철저한 뷰 라이브러리이다

React js는 기존의 javascript framework와 다르게, view에만 집중합니다. 즉, 라우팅부터 모델, 컨트롤러까지 Angular js 및 Backbone js에서는 MVC형태를 모두 갖추고 있는 MVC 및 MVVM framework라면, Facebook에서 만든 React는 철저하게 뷰단을 조작하는 라이브러리입니다. (따라서, React는 프레임 워크라기 보다 라이브러리의 성격이 강합니다.)

React가 가지는 관심사는 뷰에 대한 부분이기 때문에, 기타 라우팅 및 모델에 관련된 부분은 신경쓰지 않습니다. 오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심이 있는 라이브러리입니다. (추측하지만 아마도 PHP서버를 가지고 있는 Facebook의 특성 상, 효과적인 UX를 위한 뷰 컴포넌트만 필요하여 만들어진 배경이 있을지도 모르겠습니다.) 따라서, React는 DOM 업데이트에 관련된 성능이 강점으로 작용할 수 있는 라이브러리라고 생각하시면 될 것 같습니다.

4. React의 특징

React는 Angular js 또는 Backbone js에서 가지고 있는 뷰 모델과는 다르게, DOM 업데이트를 효과적으로 처리할 수 있는 특징을 가지고 있습니다.

• 1. JSX
• 2. 단방향 데이터 흐름
• 3. Virtual DOM

1) JSX

JSX는 Javascript XML의 약자입니다. HTML과 유사한 문법을 보임으로써, React 컴포넌트에서 사용할 마크업을 작성하기 위한 문법체계로 사용합니다. 아마, 많은 분들이 javascript내에서 append 등의 DOM을 조작하고자 할때, 여러 줄을 작성하게 되면, 문자열로 HTML 마크업을 표현하고, + 등으로 다음줄에 사용하는 식으로 많이들 개발 하셨을 것입니다.

React는 JSX를 사용함으로써, 문자열 형식으로 HTML 마크업을 표현하는 것이 아닌, HTML 마크업 그대로를 사용합니다. 따라서, 문자열로 바꾸거나 할 필요없이, 그냥 HTML 마크업을 개발하듯이 javascript 내에서 사용하시면 됩니다. 물론, JSX를 사용하기 위해 JSX Transformer나 Harmony등을 사용해야 하지만, 문자열 형식으로 +를 사용해가며 다량의 HTML 마크업 코드를 사용하고 계시는 개발자 분들은 JSX가 얼마나 편한지 알게 되실것입니다.

2) 단방향 데이터 흐름

React는 기타 javascript framework와 다르게 데이터 흐름이 단방향으로 이루어져 있습니다.

Angular js 및 Backbone을 살펴보면, Data의 변경을 framework에서 감지하고 있다가, 변경되는 시점에 DOM 객체에 렌더링 해주거나, 페이지 내에서의 모델의 변경을 감지하여 javascript 실행부에서 변경하는 등의 "양방향 데이터 바인딩"을 가지고 있습니다. 양방향 데이터 바인딩은 코드의 사용면에서 코드량을 크게 줄여주는 등의 장점이 있을 수 있겠지만, 자체 실행 코드 내에서 데이터의 변화를 감지하여 DOM 객체 전체를 렌더링 해주거나, 데이터를 바꿔주는 등의 실행으로 인하여 성능이 감소되는 경우가 생깁니다.(ionic을 사용해 보시면 성능에 관련된 부분이 좀더 민감하게 다가오실 수도 있습니다.)

React는 이러한 양방향 바인딩이 아니기 때문에 실행부 자체 내에서 데이터의 변화를 감지하지 않으며, 데이터에 변화가 오게 되면, 특정 함수를 실행시킴으로써 DOM 객체를 갱신합니다. 따라서, 성능에 관련되어 데이터 변화에 따른 성능 저하 없이 DOM 객체를 갱신해 줄 수 있는 장점이 있습니다.

3) Virtual DOM

javascript MVC framework는 DOM 객체 자체에서 데이터 변화를 감지하고 DOM 객체를 수정하여 갱신합니다. 이는 브라우저 내의 리소스를 사용하기 때문에, DOM 객체 갱신에 성능 저하가 일어날 수 밖에 없습니다.

React는 자체 실행 엔진에서 메모리상에 가상의 DOM객체를 생성하고, 단방향 데이터 흐름으로 인한 데이터 변경에 관련된 DOM 객체만 변경해 주는 식의 효율적인 알고리즘 체계를 가지고 있습니다. 따라서, 브라우저의 DOM 자체내의 리소스를 사용하지 않고도 효율적으로 DOM을 갱신할 수 있는 장점을 가지고 있습니다.

라이브러리로서의 React

React는 뷰 컴포넌트 라이브러리이기 때문에, 다양한 MVC framework에도 활용할 수 있습니다. 실제로 Backbone을 통해 M-C에 관련된 부분을 구현하고, V에 관련된 부분을 React를 사용하여 개발한 사례들도 있으며, Angular js에서도 Angular-React라는 플러그인이 있을 정도로, React는 기타 라이브러리와 궁합이 잘 맞는 편입니다.

React js는 요즘 점점 많은 분들이 사용하고 계시는 ECMA 6 Script를 사용할 수도 있습니다. 또한, pure javascript로 개발이 가능하며, 각각을 지원하기 때문에 혼재해서도 사용이 가능합니다.

framework를 사용하지 않더라도, Facebook에서 개발한 Flux나 Reflux, Redux등을 통해 모델단을 개발할 수도 있습니다. React js에 관련된 내용을 앞으로 계속해서 등록할 예정입니다. React js에 대한 기본부터, 살펴보고자 합니다. 물론 혼자 공부하는 것이기 때문에 부족한 부분들이 많을 수 있습니다.

모르시는 분들에게는 조금이라도 도움이 되길 바라며, 고수이신 분들께 혹독한 피드백을 부탁드립니다.

감사합니다 :)