Home SD 커뮤니티 Easy Tech

Easy Tech

Easy Tech

페이스북 오픈소스의 신흥강자 리액트(React.JS) 파헤치기

2019-06-04


리액트란?
React.JS

 

리액트는 UI 구현을 위한 자바스크립트 라이브러리이다. 2013년 공개된 리액트는 페이스북과 인스타그램의 개발자들이 만들고 있다. 리액트의 가장 큰 차별점은 MVC (Model-View-Controller) 패턴에서 V, 즉 View에만 집중하고 있다는 점이다. 이미 앞서 앵귤러 포스팅에서 설명한 MVC 패턴 중에서도 V는 데이터를 화면에 표현하는 부분으로 생각하면 쉽다. 따라서 View에 관련된 UI만 구현하고 싶다면 리액트를 사용했을 때 그 만족도가 크다. 

 
 

프레임워크가 아니다,
리액트는 라이브러리다.

 

리액트는 사용자 인터페이스(UI) 개발을 위한 라이브러리이다. UI 컴포넌트를 만들어 캡슐화를 시켜주기 때문에 재사용성이 높고 한가지 작업만 하기 때문에 단순하고, 다양한 자바스크립트 프레임워크나 라이브러리와 함께 사용도 가능하다. 따라서 기존 코드를 모두 바꿀 필요없이 필요한 부분에서만 조금씩 리액트를 사용할 수도 있다. 

특히 리액트는 기존의 라이브러리나 프레임워크와 달리 MVC 패턴이 아닌 그 중에서도 View에만 집중한 라이브러리인데, MVC의 특성상 확장이 어렵고 거대한 시스템에 어울리지 않다고 결론을 내린 페이스북이 이처럼 결정을 내린 것이다. 이유는 모델(Model)과 뷰(View)의 수가 가 커지고 양방향 데이터 플로우 일수록 더욱 복잡해져 디버깅과 코드를 이해하기 어려워지기 때문에 MVC는 작은 앱 개발 시 활용도가 더 높다는 것이다. 이에 좀 더 예측이 가능하도록 코드를 구조화 하기 위해 단방향 시스템 아키텍쳐인 Flux를 제안하게 되었다. 여기에 백본(Backbone.JS)의 뷰(View) 또는 앵귤러(Angular.JS)의 (Directive)를 리액트 사용으로 구현 가능하다.

 
 
★참고 : 라이브러리와 프레임워크의 차이?
정말 쉽게 애플리케이션의 제어 흐름을 누가 또는 어디서 주도하고 있느냐에 그 차이가 있다고 볼 수 있다. 라이브러리는 라이브러리를 가져와 사용하며 호출하지만, 프레임워크는 가져와 사용한다기 보다는 프레임워크의 틀 안에서 사용한다는 점이 다르다. 즉 라이브러리는 개발자나 사용자가 전체적인 흐름을 구현하며 라이브러리를 가져와 쓰는 것이며, 프레임워크는 큰 틀에서 전체적인 흐름을 가지고 있어 개발자는 그 큰 틀 안에서 필요한 코드를 작성하고 구현을 하게 된다는 차이가 있다.
 
 
 
리액트의 특징

 1. 자바스크립트 기반

 리액트는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며 자바스크립트를 그대로 활용하면 된다. 앵귤러(Angular.JS)또는 뷰(Vue.JS)처럼 다른 언어를 배울 필요가 없기 때문에 자바스크립트와 HTML을 조금 아는 정도로도 개발이 가능하다.

 2. 선언형

  사용자 인터페이스를 만들때 쉽고 간결하게 해준다. 애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 랜더링해 화면 구성을 해준다. 이 처럼 선언형의 화면뷰는 예측 가능한 코드 및 쉬운 디버깅을 하게 해준다.

 3. 가상 DOM (Virtual DOM)

 DOM Tree와 같은 구조체를 Virtual DOM으로 가진다. 'diffing'알고리즘을 통해 문서의 변화를 확인, 'Recomfillation' 진행으로 부분 조작이 가능하다. 무엇보다 DOM을 직접 조작하는 것이 아니라 In-memory의 가상 DOM을 조작하기 때문에 효율적이라고 빠르다.

 4. 컴포넌트 (Components)

 요소라고 하는 컴포넌트 별로 나누어 개발이 가능하다. 또 이렇게 개발한 것을 다른 곳에 활용할 수도 있다. 또 자바스크립트와 JSX를 조금 사용할 줄 안다면 간단하게 구현이 가능한데 이 때문에 개발을 쉽게 하고 유지보수를 하는데도 큰 장점이다.  (*JSX란? 리액트로 HTML을 개발하는 방법, 매우 간단하며 쉽다.) 상태를 관리하는 컴포넌트들을 캡슐화해 빌드한 후 그 컴포넌트들을 복잡한 UI로 조합하여 구성이 가능한데, 컴포넌트 로직은 자바스크립트로 구성이 되어있어 애플리케이션을 통한 대량 데이터를 전송가능하게 하고 DOM의 외부상태를 쉽게 유지할 수도 있다.

 5. 단방향 데이터플로우

 데이터가 UI로 흐르는 구조이며, 데이터가 변했을때 UI가 업데이트 된다. 하지만 단방향이므로, UI쪽에서 데이터를 변화시키는 것은 불가능하다. 즉 데이터가 변하게 되면 UI는 변화된 새로운 데이터와 함께 업데이트 된다. 앵귤러(Angular.JS)와 비교하면 앵귤러의 경우는 양방향 데이터플로우이며, 이와는 반대로 데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해해 쉽고 편리하게 구현 가능하다.
 
 
 
리액트 네이티브
React Native


리액트가 좀 더 인기를 끌게 된 것은 '리액트 네이티브' 덕분이라고도 할 수 있다. 리액트 네이티브는 네이트브 모바일 앱을 만들기 위한 프레임워크로서 리액트를 기반으로 개발되었다. 리액트 라이브러리가 웹 개발자나 하이브리드 앱 개발자에게 유용하고 관심을 끌게 하는 기술이라면, 리액트 네이티브는 모바일 개발자들이 몹시 주목할 기술이다.

대다수의 모바일 앱은 하이브리드가 아닌 네이티브 앱 형식으로 개발이 되는데 여기서 일반적으로 안드로이드와 iOS에서 동시 작동하는 소스코드를 작성하기 위해서는 '웹뷰'를 이용해야만 했다. 그러나 웹뷰를 이용한 하이브리드 앱 기술은 기존의 네이티브 앱에서 지원하는 속성을 이해하지 못했는데 리액트 네이티브 활용으로 네이티브 속성을 그대로 이용하는 것이 가능해졌다.
 
 
 
주목하라, 리액트 네이티브

리액트 네이티브는 기존 하이브리드 앱보다 훨씬 좋은 성능을 나타낸다. 자바스크립트 코드와 네이티브 코드를 별도의 Thread로 분리한 후 이 둘 사이의 통신을 비동기식으로 만들어 네이티브가 자바스크립트 때문에 느려지는 현상을 해소할 수 있게 되었다. 이러한 리액트 네이티브를 활용한 대표적인 서비스로 인스타그램(Instagram)이 있다.  이 밖에도 넷플릭스, 에어비앤비, 세이즈보스의 웹서비스 등이 있으며, 깃허브의 '아톰에디터'처럼 데스크탑 응용프로그램에도 리액트를 활용하였다. 만약 자바스크립트를 사용해 어느 정도의 성능과 퀄리티가 보장되는 네이티브 모바일 애을 작성하고 싶다면 리액트를 추천한다.
 
 
 
리액트 네이티브의 강점

 1. 쉬운 사용법

 자바스크립트를 잘 모르는 입문자라고 하더라도 리액트 네이티브 활용으로 쉬운 앱개발이 가능하다. 안드로이드라면 자바, iOS라면 오브젝티브C로 개발하는 것이 훨씬 낫지 않을까 생각할 수도 있지만 네이티브 모바일 플랫폼 UI는 여러가지 단점이 있고 이는 리액트 네이티브에서 해결 할 수 있다. 예를 들어 안드로이드 앱의 한가지 요소에서 1픽셀만 옮기는 것이 힘들다거나, iOS 경우 레이아웃 문제 발생시 제약을 추가하는 식으로 문제를 해결하는데 여기서 하나의 제약을 추가해도 다른 부분에 적용이 되지 않을 수 있어 직관적이지 않다. 이 때문에 개발자들은 단말기의 종류에 따른 UI 개발을 해야하거나 런타임에 다양한 수치 계산을 통해 UI를 조정해야만 했다. 그러나 리액트의 독자적 체계를 통해 더 쉽고 간단하게 UI를 조절할 수 있다. 또, 아이폰과 안드로이드의 앱을 동시에 만들며 코드 재사용이 양쪽 모두 가능하다.

 2. 빠른 속도

 앱 개발자가 UI를 개발할 때 자주 발생하는 문제가 성능과 테스트인데 가상 DOM 기술을 활용해 이 문제들을 조금 더 쉽게 해결할 수 있다. 리액트는 메모리 상에 DOM을 구성해 가상 DOM으로 변경된 부분만 업데이트를 해 속도를 를 향상시킨다. 

 3. 단방향 데이터 플로우

 리액트 네이티브도 리액트와 마찬가지로 단방향 데이터 플로우로 데이터가 언제 어떻게 바뀌는 지 고민할 필요가 없으며 데이터가 변경될 시 자동적으로 사용자 인터페이스에 업데이트 되어 편리하다.