네이티브 모듈 소개
네이티브 모듈(Native Module)과 네이티브 컴포넌트(Native Components)는 기존 아키텍처에서 사용하던 안정적인 기술이다. 새로운 아키텍처가 안정화되면 이 기술들은 점차 사용되지 않을 예정이다. 새로운 아키텍처는 터보 네이티브 모듈과 패브릭 네이티브 컴포넌트를 사용해 유사한 결과를 달성한다.
때로는 React Native 앱이 JavaScript에서 기본적으로 사용할 수 없는 네이티브 플랫폼 API에 접근해야 할 때가 있다. 예를 들어 Apple Pay나 Google Pay와 같은 네이티브 API를 사용해야 하는 경우가 있다. 기존의 Objective-C, Swift, Java 또는 C++ 라이브러리를 JavaScript로 다시 구현하지 않고 재사용하거나, 이미지 처리와 같은 고성능 멀티스레드 코드를 작성해야 할 수도 있다.
NativeModule 시스템은 Java/Objective-C/C++(네이티브) 클래스의 인스턴스를 JavaScript(JS) 객체로 노출시켜, JS 내에서 임의의 네이티브 코드를 실행할 수 있게 한다. 이 기능이 일반적인 개발 프로세스의 일부가 되길 기대하지는 않지만, 반드시 존재해야 하는 중요한 기능이다. React Native가 JS 앱에서 필요한 네이티브 API를 내보내지 않는다면, 직접 내보낼 수 있어야 한다!
네이티브 모듈 설정
React Native 애플리케이션에서 네이티브 모듈을 작성하는 방법은 여러 가지가 있다:
- React Native 애플리케이션에서 임포트할 수 있는 로컬 라이브러리를 생성하는 방법. 더 자세한 내용은 로컬 라이브러리 생성 가이드를 참고한다.
- React Native 애플리케이션의 iOS/Android 프로젝트 내에서 직접 작성하는 방법
- NPM 패키지로 만들어 자신 또는 다른 React Native 애플리케이션에서 의존성으로 설치할 수 있게 하는 방법
이 가이드에서는 먼저 React Native 애플리케이션 내에서 직접 네이티브 모듈을 구현하는 방법을 설명한다. 하지만 아래 가이드에서 작성한 네이티브 모듈은 NPM 패키지로 배포할 수도 있다. 이를 원한다면 네이티브 모듈을 NPM 패키지로 설정하기 가이드를 확인한다.
시작하기
이어지는 섹션에서는 React Native 애플리케이션 내에서 네이티브 모듈을 직접 구축하는 방법을 안내한다. 이를 위해 먼저 React Native 애플리케이션이 준비되어 있어야 한다. 아직 애플리케이션이 없다면 여기의 단계를 따라 React Native 애플리케이션을 설정할 수 있다.
React Native 애플리케이션 내에서 JavaScript를 통해 iOS/Android 네이티브 캘린더 API에 접근해 캘린더 이벤트를 생성하고 싶다고 가정해 보자. React Native는 네이티브 캘린더 라이브러리와 통신할 수 있는 JavaScript API를 제공하지 않는다. 하지만 네이티브 모듈을 통해 네이티브 캘린더 API와 통신하는 네이티브 코드를 작성할 수 있다. 그리고 React Native 애플리케이션 내에서 JavaScript를 통해 해당 네이티브 코드를 호출할 수 있다.
이어지는 섹션에서는 안드로이드와 iOS 모두에서 사용할 수 있는 캘린더 네이티브 모듈을 직접 만들어 볼 것이다.