React Native SDK 설치

React Native 프로젝트 생성

다음 명령어를 사용하여 React Native 프로젝트를 생성합니다.

npx react-native init MyApp

이전 명령이 방금 생성한 프로젝트 디렉토리로 변경합니다

cd MyApp

npm으로 SDK 설치

React Native 프로젝트 디렉토리에서 다음 명령을 사용하여 SDK를 프로젝트에 추가합니다.

npm install realm

Enable Hermes

이 SDK는 모바일에 최적화된 React Native의 JavaScript 엔진인 Hermes를 지원합니다. React Native CLI로 생성된 새 앱에는 기본적으로 Hermes가 활성화되어 있습니다.

Hermes는 SDK와 함께 사용하는 것이 좋습니다. 그러나 SDK는 앱에 필요한 경우 JavaScriptCore (JSC) 엔진도 지원합니다.

현재 JSC를 사용하는 기존 앱은 Android와 iOS에서 별도로 Hermes를 활성화할 수 있습니다. 방법을 알아보려면 Hermes 사용 하기를 참조하세요. 가이드를 React Native Docs.

CocoaPods 종속성 해결

iOS 앱의 경우 React Native 프로젝트 디렉토리에서 다음의 명령을 사용하여 CocoaPods 종속성을 가져옵니다.

cd ios && pod install && cd ..

이렇게 하면 SDK 라이브러리가 다운로드되고 Xcode에서 작업하여 애플리케이션 을 실행 수 있는 프로젝트 .xcworkspace 파일 이 다시 생성됩니다.

Android Proguard 구성 확장

Android 앱에서 사용하려면 Proguard 구성을 확장해야 할 수 있습니다.Proguard 구성에서 다음을 추가합니다.

-keep class io.realm.react.**

TypeScript 활성화(선택사항이지만 권장됨)

타입스크립트( Typescript )는 정적 유형 검사 및 기타 기능을 추가하여 애플리케이션 규모의 개발을 더욱 견고하게 만드는 JavaScript 의 상위 집합입니다. Typescript 프로젝트에서 를 사용하려면 React Native 팀의 공식 Typescript 및 React Native 가이드 를 따르세요. . SDK는 기본적으로 타입스크립트( Typescript )를 지원하며 타입스크립트( Typescript ) 프로젝트에 쉽게 통합됩니다.

@realm/react 라이브러리 설치

@realm/react는 쿼리, 데이터베이스에 쓰기, 객체 변경 알림 수신과 같은 일반적인 SDK 작업을 간소화하는 npm 패키지입니다. 이를 통해 자체 수신기(listener) 생성 및 상태 관리와 같은 상용구 코드를 줄일 수 있습니다.

@realm/react 다양한 후크가 있는 제공자를 통해 SDK에 대한 액세스를 이용할 수 있습니다. 데이터가 변경되면 후크가 React 상태를 업데이트합니다. 즉, 이러한 후크를 사용하는 컴포넌트는 데이터베이스의 데이터가 변경될 때마다 다시 렌더링됩니다.

React Native 프로젝트 디렉토리에서 다음 명령을 사용하여 @realm/react을(를) 프로젝트에 추가합니다.

npm install @realm/react

앱 실행하기

React Native를 사용하면 동일한 React 코드베이스를 사용하는 iOS 및 Android 앱을 동시에 개발할 수 있습니다. 프로젝트 디렉토리에 있는 .js 또는 .ts 소스 파일을 편집하여 앱을 개발할 수 있습니다.

개발 과정에서 앱은 React 소스 코드를 로컬 번들 서버에서 번들로 읽습니다. 번들 서버를 실행하려면 React Native 프로젝트 디렉토리에서 다음 명령을 사용하세요.

npm start

번들 서버가 실행되면 Android 및 iOS 앱을 시작할 수 있습니다.

• Android 앱 을 실행 하려면 Android Studio를 사용하여 프로젝트 디렉토리 에서 android 디렉토리 를 열고 Run 를 클릭합니다.

• iOS 앱을 실행하려면 Xcode를 사용하여 ios 디렉토리에서 .xcworkspace 파일을 엽니다. 설정 중에 CocoaPods를 사용하지 않은 경우 대신 ios 디렉토리에서 .xcodeproj 파일을 엽니다. 프로젝트를 연 후 Run을(를) 클릭합니다.

React Native 프로젝트 생성

다음 명령어를 사용하여 React Native 프로젝트를 생성합니다.

react-native init MyApp

이전 명령이 방금 생성한 프로젝트 디렉토리로 변경합니다

cd MyApp

NPM을 사용하여 SDK 설치

React Native 프로젝트 디렉토리에서 다음 명령을 사용하여 SDK를 프로젝트에 추가합니다.

npm install realm

SDK의 네이티브 모듈 연결

React Native 프로젝트 디렉토리 에서 다음 명령을 사용하여 SDK의 네이티브 모듈을 프로젝트 에 연결합니다.

react-native link realm

링크 단계 확인(Android)

Android 개발의 경우 링크 단계에서 SDK 모듈을 Gradle 구성 파일에 올바르게 추가했는지 확인합니다. 일부 버전에서는 React Native 가 SDK를 제대로 연결하지 못하는 것으로 알려져 있습니다. 이 경우 해당 파일에 아래에서 누락된 줄을 추가하여 SDK를 수동으로 연결할 수 있습니다.

먼저 android/settings.gradle 파일 에 SDK가 포함되어 있고 SDK의 프로젝트 디렉토리 를 지정하는지 확인합니다.

rootProject.name = 'MyApp'
include ':realm'
project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

둘째, android/app/build.gradle 파일의 dependencies 섹션이 SDK를 종속성으로 선언하는지 확인합니다.

dependencies {
    implementation project(':realm')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    // ...
}

마지막으로 MainApplication.java 파일 이 RealmReactPackage 를 가져와서 패키지 목록에서 인스턴스화하는지 확인합니다.

import io.realm.react.RealmReactPackage; // Add this import.
public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RealmReactPackage() // Add this line.
        );
    }
    // ...
}

TypeScript 활성화(선택 사항)

타입스크립트( Typescript )는 정적 유형 검사 및 기타 기능을 추가하여 애플리케이션 규모의 개발을 더욱 견고하게 만드는 JavaScript 의 상위 집합입니다. Typescript 프로젝트에서 를 사용하려면 React Native 팀의 공식 Typescript 및 React Native 가이드 를 따르세요. . SDK는 기본적으로 타입스크립트( Typescript )를 지원하며 타입스크립트( Typescript ) 프로젝트에 쉽게 통합됩니다.

앱 실행하기

React Native를 사용하면 동일한 React 코드베이스를 사용하는 iOS 및 Android 앱을 동시에 개발할 수 있습니다. 프로젝트 디렉토리에 있는 .js 또는 .ts 소스 파일을 편집하여 앱을 개발할 수 있습니다.

개발 과정에서 앱은 React 소스 코드를 로컬 번들 서버에서 번들로 읽습니다. 번들 서버를 실행하려면 React Native 프로젝트 디렉토리에서 다음 명령을 사용하세요.

npm start

번들 서버가 실행되면 Android 및 iOS 앱을 시작할 수 있습니다.

• Android 앱을 실행하려면 Android Studio를 사용하여 프로젝트 디렉토리에서 android 디렉토리를 열고 Run을(를) 클릭합니다.

• iOS 앱을 실행하려면 Xcode를 사용하여 ios 디렉토리에서 .xcworkspace 파일을 엽니다. 설정 중에 CocoaPods를 사용하지 않은 경우 대신 ios 디렉토리에서 .xcodeproj 파일을 엽니다. 프로젝트를 연 후 Run을(를) 클릭합니다.