[React Native] 리액트 네이티브란? 개념과 특징, 장단점 !

리액트 네이티브란?!

리액트 네이브는 'iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크'입니다.

리액트 네이티브는 사용자 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있는데,

브라우저가 아닌 모바일 플랫폼이 타깃입니다. 즉, 웹 개발자가 익숙한 자바스크립트 라이브러리를 이용하면서

겉모습과 실제 동작까지 진짜 네이티브인 모바일 앱을 만들 수 있습니다.

게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하면

iOS와 안드로이드 앱을 동시에 개발할 수 있습니다!

 

공식 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해 주는데,

커뮤니티 프로젝트를 이용하면 리액트 네이티브로 윈도우, 우분투, 웹 등등

다른 플랫폼에서 동작하는 앱을 만들 수 있습니다. 

 

리액트 네이티브를 사용하는 앱: 페이스북, 에어비앤비, 월마트, 바이두 등...

 

 

 

리액트 네이티브 장점

 

리액트 네이티브는 코도바(Cordova)나 아이오닉(Ionic)과 같은 기존의 크로스 플랫폼 앱 개발 방법과는

눈에 띄는 차이점이 있습니다. 바로 대상 플랫폼의 표준 렌더링 API를 사용한다는 점 입니다.

자바스크립트, HTML, CSS를 사용하여 모바일 앱을 만드는 기존의 밥법들은 웹뷰(webview)를 이용하여 렌더링 합니다. 이러한 기존 방식은 앱을 실행할 때 유난히 성능이 떨어진다는 단점이 있습니다. 게다가, 대상 플랫폼의 UI 요소들을 대개 이용하지 않습니다. 이러한 프레임워크들은 네이티브 UI 요소들을 흉내 내려 하지만 결과는 애매합니다.

애니매이션과 같이 아주 섬세한 부분에 대한 리버스 엔지니어링(reverse engineering)은 노력이 많이 들지만 쉽게 구식이 되어버립니다.

 

그에 반해, 리액트 네이티브는 우리가 작성한 마크업을 플랫폼에 따라

그에 상응하는 진짜 네이티브 엘리먼트로 전환합니다. 게다가 리액트는 메인 UI 스레드와 분리되어 실행되기에

앱의 역량을 줄이지 않아도 앱은 빠른 성능을 유지할 수 있습니다.

리액트 네이티브의 렌더링 갱신 주기는 리액트와 같은데, props나 state가 변경될 때 리액트 네이티브는 뷰를 다시 렌더링 합니다. 리액트 네이티브와 브라우저에서 실행하는 리액트의 가장 큰 차이점은 HTML과 CSS 마크업이 아니라 대상 플랫폼의 UI라이브러리를 이용해 렌더링 한다는 점 입니다.

이는 평소 리액트를 이용하여 웹 페이지를 만드는 개발자라면 평상시와 비슷한 도구들을 가지고

성능과 외관 모두 진짜 네이티브인 모바일 앱을 만들 수 있다는 얘기입니다. 

 

리액트 네이티브의 장점을 크게 두가지로 나누자면 첫번째는 '개발 경험'을 비추어 보았을 때의 장점입니다.

이미 모바일 앱을 개발해보았다면 리액트 네이티브를 이용한 개발이 무척 쉬울 것입니다.

리액트 네이티브에는 강력한 개발자 도구와 의미 있는 오류 메시지가 프레임 워크에 기본적으로 포함되어 있습니다.

따라서 개발과정에서 이러한 도구들을 자연스럽게 사용하시면 됩니다.

예를 들어 리액트 네이티브를 이용하여 앱을 만들 때는 자바스크립트로만 작성하기 때문에 변경사항을 확인하기 위해 앱을 다시 빌드하지 않아도 됩니다. 대신에 웹 페이지 새로고침하듯이 손쉽게 앱을 새로고침 할 수 있습니다.

 

그 외에도 리액트 네이티브는 똑똑한 디버깅 도구와 에러 리포팅 기능도 제공합니다.

그리고 자바스크립트 개발 시 선호하는 텍스트 에디터를 그대로 사용할 수 있습니다. 

리액트 네이티브는 iOS 앱은 Xcode에서, 안드로이드 앱은 안드로이드 스튜디오에서만 개발하도록 제한하지 않습니다.

또한 개발 환경이 지속적으로 개선되고 있으므로 리액트 네이티브를 통한 개발 주기는 더욱 빨라질 것으로 예상 됩니다.

그 예로 애플과 구글은 자바스크립트 기반의 변경사항에 한해 표준 심사 절차 없이 원격으로 로딩하는 것을 허용하고 있습니다. 특히 며칠 혹은 몇 주까지 걸리는 iOS 리뷰를 거치지 않아도 된다는 점에서 매우 편리합니다.

이런 작지만 추가적인 특징은 개발자들의 시간과 에너지 절약으로 이어져 개발 생산성이 향상될 것이라고 생각합니다.

 

또 다른 장점은 '코드 재사용과 지식 공유'입니다.

리액트 네이티브를 사용하면 모바일 앱을 개발하는 데 필요한 리소스(resource)를 상당히 줄일 수 있습니다.

리액트 코드를 작성하는 방법을 아는 개발자라면 누구나 같은 기술을 가지고 웹이나 iOS, 안드로이드를 타깃으로 하는 결과물을 만들 수 있습니다. 특정 플랫폼 개발자를 따로 둘 이유를 없앰으로써, 리액트 네이티브는 팀이 더 빠르게 개발하고 지식과 리소스를 더욱 효과적으로 공유할 수 있게 해줄 것 입니다.

 

지식을 공유할 수 있을 뿐만 아니라 작성한 코드 또한 상당 부분을 공유할 수 있습니다.

리액트 네이티브로 작성한 모든 코드가 크로스 플랫폼은 아닙니다.

어떤 플랫폼에서 어떤 기능이 필요로 하느냐에 따라 오브젝티브-C나 자바를 다루어야 합니다.

(네이티브 모듈에 대해서는 다음에 더 자세히 소개할 예정!)

참고로, 페이스북 애드매니저 앱은 안드로이드 버전의 87% 코드를 iOS 버전과 공유하고 있습니다. 

 

 

리액트 네이티브 단점

 

리액트 네이티브가  사용하기 적합한지 여부는 상황과 개발 환경 등을 고려해 보아야 합니다.

리액트 네이티브에는 추가적인 레이어가 있기 때문에 디버깅이 간단하지 않은데, 특히 리액트와 대상 플랫폼 사이에서 발생하는 문제의 디버깅은 더욱 간단하지 않습니다.

 

또한 대상 플랫폼의 새로운 버전이 공개되었을 때

(예를 들어 업데이트된 안드로이드 버전에서 새로운 API 세트를 제공할 때)

리액트 네이티브가 이를 모두 지원할 때까지 시간이 좀 걸립니다.

(다행히 대부분의 경우 직접 구현하지 않는 API를 리액트 네이티브에서 사용하도록 구현할 수 있음.

이것 또한 추후 자세히 소개할 예정!)

리액트 네이티브로 구현하다가 어려움에 봉착했을 때 리액트 네이티브만을 고집할 필요는 없다.

많은 회사가 하이브리드 형태로 성공적으로 앱을 구현하고 있다.

 

 

 

요약

 

웹 개발자가 이미 알고있는 자바스크립트 지식을 이용하여 모바일 앱을 만들 수 있다는

사실만으로도 리액트 네이티브는 흥미로운 프레임 워크입니다!

리액트 네이티브를 이용하면 빠르게 모바일 앱을 개발할 수 있고 앱의 품질이나 사용자 경험을 희생하지 않고도

iOS와 안드로이드 그리고 웹에 이르기까지 능률적인 코드 공유가 가능합니다.

(다만 애플리케이션 셋업이 조금 더 복잡해지는 것은 감수해야 함)

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)