React Native란 - 모바일 앱 개발 초보자를 위한 React Native #1

이번부터는 모바일 앱 프로그래밍 언어에 대해 시작해 보려 합니다. iOS나 Android 플랫폼 각각에 전용됐던 프로그래밍 언어들이 얼마 전부터는 크로스플랫폼(Crossplatform)이라는 이름으로 하나의 프로그래밍 언어로 사용되게 되었죠. 오늘은 중 하나인 React Native라는 프로그래밍 언어에 대한 이야기를 시작하겠습니다.

React Native란

 

 

모바일 앱 개발 초보자를 위한 React Native #1

React Native는 2015년 페이스북(Meta)에서 처음 오픈소스로 공개된 모바일 앱 개발 프레임워크입니다. 원래 페이스북 내부에서는 ‘React’라는 웹용 라이브러리를 사용하여 빠르고 효율적인 사용자 인터페이스(UI)를 구성하고 있었는데, 이 React의 아이디어를 모바일 환경으로 확대해보고자 한 시도가 바로 React Native의 시작이었습니다.

 

반응형

 

 

• 네이티브 앱 개발의 어려움: 기존에 모바일 앱을 만들려면 Android는 Java(또는 Kotlin), iOS는 Objective-C(또는 Swift)로 각각 따로 개발해야 했습니다. 프로젝트 규모가 클수록 두 플랫폼을 모두 지원해야 하므로 개발 인력과 유지보수에 따른 비용이 크게 늘어나곤 했습니다.
• 한 번의 코드로 두 플랫폼을 함께 개발할 수 있다면?: 이런 문제의식에서 나온 아이디어가 웹 기술(자바스크립트)을 기반으로 iOS와 Android 앱을 동시에 개발하는 것이었습니다. 그러나 단순히 웹뷰(WebView)에 화면을 띄우는 방식이 아닌, 실제 ‘네이티브 컴포넌트’를 자바스크립트로 제어하자는 발상이 핵심이었습니다. 이 방식은 성능면에서도 장점을 가지면서, 개발자의 코드량과 유지보수 부담을 줄여줄 수 있었습니다.
• 웹 개발과 네이티브 개발의 융합을 시도: 페이스북은 이미 웹 프론트엔드 분야에서 React라는 혁신적인 라이브러리를 통해 ‘컴포넌트 기반 UI 개발’과 ‘가상 DOM’을 구현해 좋은 성과를 얻고 있었습니다. 이를 모바일에 접목해 보자는 아이디어로 탄생한 React Native는, 자바스크립트를 사용하지만 시스템 레벨에서는 실제 네이티브 UI를 렌더링 합니다. 바로 이 부분이 기존의 하이브리드 앱(웹뷰 기반)과 구분되는 React Native만의 특징이 됩니다.

 

 

 

 

 

 

  기존 네이티브 앱 개발과의 차이점

React Native와 기존 네이티브 앱 개발(예: Android: Java/Kotlin, iOS: Objective-C/Swift) 간의 가장 큰 차이는 개발 언어와 개발 비용입니다.

1. 언어와 프레임워크의 차이
   • Android 네이티브: Java/Kotlin, Android SDK
   • iOS 네이티브: Objective-C/Swift, iOS SDK
   • React Native: 자바스크립트(또는 TypeScript) + React Native 프레임워크 즉, React Native를 사용하면 웹 환경에서 흔히 쓰이는 자바스크립트만 잘 알아도, 비교적 쉽게 모바일 앱 개발에 뛰어들 수 있게 됩니다.
2. 단일 코드베이스로 멀티 플랫폼 대응
   • 기존 방식: Android용 코드와 iOS용 코드를 각각 개발 → 실제 구현 로직도 두 배가 됨
   • React Native: 크게 다르지 않은 단일 코드베이스를 통해 iOS와 Android 앱을 동시에 개발 물론 모든 기능을 100% 동일 코드로 해결할 수 있는 것은 아니며, 플랫폼별로 나뉘어 처리해야 하는 부분(예: 특정 하드웨어 기능, UI 차이 등)이 존재합니다. 하지만 전통적인 네이티브 방식에 비해 코드 중복이 현저히 줄어듭니다.
3. 성능과 사용자 경험(UX)의 측면
   • 네이티브 앱: OS 수준의 최적화와 직접적인 하드웨어 접근이 가능하여 대체로 빠른 성능
   • React Native 앱: 자바스크립트 구동 엔진과 네이티브 브리지를 통해 동작. 대부분의 상황에서 성능은 네이티브에 근접하지만, 극한의 퍼포먼스를 요구하는 게임이나 3D 그래픽 등에서는 제약이 있을 수 있습니다.
   • 사용자 입장에서는 잘 만들어진 React Native 앱이 네이티브 앱과 구분하기 어려울 정도로 빠르고 부드럽게 동작하는 경우도 많습니다.

 

 

 

 

 

 

  React Native의 주요 장점과 단점

React Native가 매력적이긴 하지만, 모든 상황에서 만능 솔루션은 아닙니다. 실제 프로젝트에서 기술 스택으로 선택하기 전, 장점과 단점을 잘 파악해 둘 필요가 있습니다.

• 장점
  • 생산성 향상: 단일 코드베이스로 iOS와 Android를 동시에 개발할 수 있어, 초기 개발 속도와 유지보수 비용이 크게 줄어듭니다.
  • 익숙한 언어: 웹 개발 경험이 있는 사람이라면 자바스크립트를 그대로 활용할 수 있으므로, 배우기 쉽고 전환 비용이 낮습니다.
  • 풍부한 커뮤니티와 생태계: React Native는 전 세계적으로 큰 인기를 끌고 있어, 문제가 생겼을 때 해결 방법을 찾기 쉽고, 새로운 라이브러리나 플러그인이 빠르게 개발되고 있습니다.
  • 핫 리로딩(Hot Reloading): 앱을 새로 빌드하지 않고도 코드 수정 내용을 즉시 반영해볼 수 있어, 개발 효율을 높여줍니다.
• 단점
  • 네이티브 기능 종속: 플랫폼별로 아주 특수한 네이티브 기능을 사용해야 하거나, 성능이 중요한 멀티미디어 작업, 3D 그래픽 등에 대해서는 한계가 있을 수 있습니다.
  • 플랫폼별 세부 설정 필요: 안드로이드와 iOS 모두 동작하도록 설정을 유지해야 하므로, 아무리 단일 코드베이스라 해도 플랫폼 특성별 세부적인 설정이 필요합니다.
  • 버전 호환성 문제: React Native, 각종 라이브러리, 그리고 Android/iOS 버전 간의 호환성이 꼬이면 프로젝트가 복잡해질 수 있으므로 꾸준히 업데이트하고 관리해야 합니다.
  • 최적화 이슈: 크게 문제가 없는 수준이지만, 네이티브 앱 대비해서 브릿지(Bridge) 구조로 인한 오버헤드가 있을 수 있습니다. 고성능이 필요한 앱이라면 네이티브 모듈과의 결합 여부를 면밀히 검토해야 합니다.

 

 

 

 

 

 

대략, 리액트에 대한 소개는 여기까지 하고, 다음부터는 실제 개발을 진행기 위한 환경 설정과 세부 내용에 대해 다뤄보도록 하겠습니다.