네이티브 모듈 소개
Native Module과 Native Components는 기존 아키텍처에서 사용하던 안정적인 기술이다.
새로운 아키텍처가 안정화되면 앞으로 지원이 중단될 예정이다. 새로운 아키텍처에서는 Turbo Native Module과 Fabric Native Components를 사용해 유사한 결과를 달성한다.
때로는 React Native 앱이 자바스크립트에서 기본적으로 제공되지 않는 네이티브 플랫폼 API에 접근해야 할 때가 있다. 예를 들어 Apple Pay나 Google Pay에 접근하기 위한 네이티브 API가 필요할 수 있다. 기존의 Objective-C, Swift, Java 또는 C++ 라이브러리를 자바스크립트로 재구현하지 않고 재사용하거나, 이미지 처리와 같은 작업을 위해 고성능의 멀티스레드 코드를 작성해야 할 수도 있다.
NativeModule 시스템은 Java/Objective-C/C++(네이티브) 클래스의 인스턴스를 자바스크립트(JS) 객체로 노출시킨다. 이를 통해 자바스크립트 내에서 임의의 네이티브 코드를 실행할 수 있다. 이 기능이 일반적인 개발 과정의 일부가 되길 기대하지는 않지만, 존재하는 것이 필수적이다. React Native가 자바스크립트 앱에 필요한 네이티브 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를 통해 해당 네이티브 코드를 호출할 수 있다.
이어지는 섹션에서는 Android와 iOS 모두에서 사용할 수 있는 캘린더 네이티브 모듈을 직접 만들어볼 것이다.