React Native 앱 개발하기 (2)

지난 번에는 React Native 앱의 초기화 방법과 초기화시 생성되는 각 파일들의 기능들에 대해 알아봤습니다. 이번 시간에는 JavaScript로 작성되는 코드를 어떻게 각 플랫폼으로 구동하는 것인지 그 원리에 대해 알아보려합니다.

 

React Native 구동 원리

React Native는 JavaScript 코드를 네이티브 플랫폼에서 실행할 수 있는 브리지를 제공하고  JavaScript 코드와 네이티브 코드 간의 통신은 브리지를 통해 이루어집니다. 이를 통해 JavaScript에서 네이티브 API를 호출하거나, 네이티브에서 JavaScript 이벤트를 발생시킬 수 있습니다. Android에서는 JavaScriptCore를, iOS에서는 JavaScriptCore 또는 Hermes 엔진을 사용합니다.

 

 

React Native는 JavaScript로 작성된 UI 컴포넌트를 각 플랫폼의 네이티브 컴포넌트에 매핑합니다. 예를 들어, <View>는 Android의 ViewGroup과 iOS의 UIView에 매핑됩니다. 필요한 경우 플랫폼별 코드를 작성할 수 있습니다. 이는 .android.ts와 .ios.ts 확장자를 사용하거나, Platform.OS 체크를 통해 구현할 수 있습니다.

 

React Native는 CSS와 유사한 스타일 시스템을 제공하여, 두 플랫폼에서 일관된 UI를 구현할 수 있으며 핫 리로딩이라는 기능을 제공합니다. 핫 리로딩은 개발 중 코드 변경 사항을 실시간으로 확인할 수 있는 기능으로 React Native 개발 과정에서 매우 유용한 기능입니다.

 

즉, React Native는 JavaScript로 개발된 코드를 각 플랫폼에 맞게 동적으로 변환해줍니다. 앱이 시작되면, 각 플랫폼(Android/iOS)에서 JavaScript 엔진이 초기화됩니다. 이 엔진은 JavaScript 코드를 실행하는 환경을 제공합니다.

 

JavaScript와 네이티브 코드 사이의 통신은 '브리지'라고 불리는 중간 계층을 통해 이루지며 브리지는 JavaScript 코드의 요청을 네이티브 코드로 전달하고, 네이티브 코드의 응답을 다시 JavaScript로 반환합니다. 이 과정은 모두 비동기적으로 이루어지며 이는 성능을 최적화하고 UI의 반응성을 유지해줍니다.

 

이러한 메커니즘을 통해 React Native는 JavaScript(또는 TypeScript) 코드를 실시간으로 해석하고 실행하며, 필요에 따라 네이티브 플랫폼의 기능을 호출합니다. 이로 인해 개발자는 하나의 코드베이스로 두 플랫폼의 앱을 동시에 개발할 수 있게 됩니다.

 

핫 리로딩

핫 리로딩(Hot Reloading)은 React Native 개발 과정에서 매우 유용한 기능이며 개발자가 코드를 수정했을 때, 앱을 완전히 다시 시작하지 않고도 변경 사항을 즉시 앱에 반영하는 기능입니다.

 

Metro 번들러(React Native의 기본 번들러)에 의해 프로젝트 파일의 변경을 지속적으로 모니터링하며 파일이 수정되면 즉시 이를 감지합니다. 변경된 코드는 즉시 새로운 JavaScript 번들로 컴파일됩니다.

 

새로 컴파일된 코드는 개발 서버에서 실행 중인 앱으로 웹소켓 연결을 통해 이루어지며 앱의 JavaScript 런타임은 새로운 코드를 받아 기존 코드와 교체합니다.

 

핫 리로딩은 가능한 한 앱의 현재 상태를 유지하려고 시도하고 변경된 컴포넌트와 그 하위 컴포넌트들에 대해서만 리렌더링하여 UI가 즉시 업데이트되어 변경 사항이 반영됩니다. 컴포넌트의 state와 Redux 스토어 같은 전역 상태는 보존됩니다.

 

Metro 번들러

Metro 번들러는 React Native 개발의 핵심 도구로, JavaScript/TypeScript 코드와 asset들을 하나의 번들로 묶고, Babel을 사용하여 최신 JavaScript 문법을 지원하기 위한 코드 변환을 수행합니다. 또한 프로젝트의 모든 의존성을 추적하고 관리하며, 파일 시스템을 모니터링하여 코드 변경을 실시간으로 감지합니다. 개발 과정에서 Metro는 번들된 코드를 제공하는 HTTP 서버 역할을 하며, 코드 변경 시 새로운 번들을 생성하고 앱에 전달하는 핫 리로딩 기능을 지원하여 개발자의 생산성을 크게 향상시킵니다.

 

개발 중에는 Metro 서버를 실행해야 합니다. 이는 보통 react-native start 명령어로 시작되며 핫 리로딩을 사용하려면 Metro 서버가 계속 실행되어야 합니다.

 

Metro 서버는 개발 모드에서만 필요합니다. 프로덕션 빌드에는 포함되지 않습니다.

 

앱과 Metro 서버 간의 실시간 통신은 웹소켓을 통해 이루어지며 React Native CLI는 Metro 서버가 중단되면 자동으로 재시작하려고 시도합니다.

 

추가로 Metro 서버는 Chrome 개발자 도구나 React Native Debugger와 같은 디버깅 도구와도 연동됩니다.

 

 

주의사항

• 네트워크 연결: 개발 기기와 Metro 서버가 실행 중인 컴퓨터가 같은 네트워크에 연결되어 있어야 합니다.
• 포트 설정: 기본적으로 8081 포트를 사용하지만, 필요시 변경할 수 있습니다.
• 성능 영향: 개발 모드에서 Metro 서버 사용은 앱 성능에 영향을 줄 수 있습니다. 프로덕션 빌드에서는 이 영향이 없습니다.
• 보안: 개발 중에만 Metro 서버를 사용하고, 프로덕션 환경에서는 비활성화해야 합니다.