Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK
/
React Native SDK
/
데이터 동기화

동기화된 Realm 구성 - React Native SDK

이 페이지의 내용

  • 전제 조건
  • 동기화된 Realm 구성
  • AppProvider
  • UserProvider
  • RealmProvider
  • 특정 경로에서 동기화된 Realm 열기
  • 오프라인 상태에서 동기화된 Realm에 액세스
  • 백그라운드 동기화로 즉시 액세스
  • 백그라운드 동기화를 통한 시간 초과 후 액세스
  • @realm/react 제공자 및 훅

각각 로컬 데이터 사본을 가진 여러 기기 간에 데이터를 자동으로 동기화하도록 영역을 구성할 수 있습니다.

App Services App 에서 동기화 를 설정하다 하는 방법에 대한 지침을 포함하여 동기화된 Realm에 대한 자세한 내용은 Atlas Device Sync 개요를 참조하세요.

다양한 영역 구성에 대한 자세한 내용은 Realm 구성을 참조하세요.

전제 조건

React Native 애플리케이션에서 Flexible Sync를 사용하여 영역을 구성하기 전에 다음읗 수행합니다.

  1. 백엔드에서 Flexible Sync를 활성화합니다. 클라이언트 애플리케이션에서 사용하려면 먼저 백엔드에서 Flexible Sync를 구성해야 합니다.

  2. 앱 클라이언트를 초기화합니다.

  3. 클라이언트 프로젝트에서 사용자를 인증합니다.

동기화된 Realm 구성

@realm/react의 공급자를 사용하여 동기화 영역을 구성합니다.

기본적으로 Realm은 서버의 모든 데이터를 반환하기 전에 동기화합니다. 백그라운드에서 데이터를 동기화하려면 오프라인 상태에서 동기화된 Realm 구성하기를 참조하세요.

동기화된 영역을 구성하려면 다음과 같이 하세요.

  1. @realm/react 에서 제공자 를 가져옵니다.

  2. AppProvider 구성.

  3. UserProvider를 구성하여 AppProvider 내에 중첩시킵니다.

  4. 동기화하려면 RealmProvider 을(를) 구성하여 UserProvider 내에 중첩시킵니다. 동기화 구독을 설정해야 합니다. 아래 예시에서는 초기 구독을 사용하지만 RealmProvider 하위 구성 요소에서 구독을 설정할 수도 있습니다.

공급자를 중첩하는 방법은 다음과 같습니다.

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[YourObjectModel]}
          sync={{
            flexible: true,
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects(YourObjectModel));
              },
            },
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

참고

파티션 기반 동기화

이 페이지에서는 Flexible Sync Realm을 다룹니다. Flexible Sync는 Atlas Device Sync 를 사용하는 새 앱에서 선호하는 모드입니다. 이전 파티션 기반 동기화를 사용하는 Realm에 대한 자세한 내용은 파티션 기반 동기화를 참조하세요 .

AppProvider

@realm/reactAppProvider를 사용하면 App Services 앱의 인스턴스에 액세스할 수 있습니다.

앱 클라이언트를 설정하려면 AppProvider의 id 프롭에 앱 ID 문자열을 전달합니다. AppProvider을(를) 사용하여 앱에 액세스해야 하는 모든 구성요소를 래핑합니다.

import React from 'react';
import {AppProvider} from '@realm/react';
function AppWrapper() {
  return (
    <View>
      <AppProvider id={APP_ID}>
        <MyApp />
      </AppProvider>
    </View>
  );
}

AppProvider에 대한 자세한 내용은 Atlas App Services 연결 페이지에서 확인할 수 있습니다.

UserProvider

UserProvider 는 Realm 사용자에게 액세스 권한을 부여합니다. 앱이 후크를 사용하려면 UserProvider 이(가) 필요합니다.

먼저 AppProvider 및 UserProvider(으)로 사용자 인증을 구성해야 합니다. 그런 다음 useApp() 및 useUser() 후크를 사용하여 인증 작업을 수행합니다.

사용자 인증을 설정하려면 다음을 수행합니다.

  1. App Services와 함께 사용하려는 모든 구성 요소를 AppProvider(으)로 래핑합니다.

  2. AppProvider 내에서 인증된 사용자에 액세스해야 하는 모든 구성 요소를 UserProvider(으)로 래핑합니다.

  3. UserProvider에 사용자를 로그인하는 구성 요소가 있는 fallback 프롭을 포함합니다. 인증된 사용자가 없는 경우 앱은 이 구성 요소를 렌더링합니다.

  4. UserProvider.fallback 프롭에 전달된 구성 요소에서 useApp() 후크로 액세스할 수 있는 Realm.App.logIn()(으)로 사용자를 인증합니다.

UserProvider(으)로 래핑된 구성 요소는 앱에 인증된 사용자가 있는 경우에만 렌더링됩니다. 이러한 구성 요소는 useUser() 후크를 사용하여 인증된 사용자에게 액세스할 수 있습니다.

import React from 'react';
import {useApp, UserProvider, AppProvider} from '@realm/react';
import {Button} from 'react-native';
function AppWrapper() {
  return (
    <AppProvider id={APP_ID}>
      {/* If there is no authenticated user,
          the app mounts the `fallback` component.
          Once the user successfully authenticates,
          the app unmounts the component in the
          `UserProvider.fallback` prop
          (the `LogIn` component in this example). */}
      <UserProvider fallback={LogIn}>
        {/* Components with access to the user.
            These components only mount
            if there's an authenticated user.*/}
        <RestOfApp />
      </UserProvider>
    </AppProvider>
  );
}
function LogIn() {
  const app = useApp();
  // This example uses anonymous authentication.
  // However, you can use any authentication provider
  // to log a user in with this pattern.
  async function logInUser() {
    await app.logIn(Realm.Credentials.anonymous());
  }
  return (
    <Button
      title='Log In'
      onPress={logInUser}
    />
  );
}

사용자 인증 페이지에서 UserProvider에 대한 자세한 내용을 확인할 수 있습니다.

RealmProvider

RealmProvider 는 Realm을 하위 구성 요소에 노출하는 래퍼입니다. RealmProvider 에 소품을 전달하여 Realm을 구성합니다.

RealmProvider 이(가) 렌더링되면 Realm이 열립니다. 즉, 렌더링에 실패하면 하위 구성 요소가 Realm에 액세스할 수 없습니다.

동기화된 영역을 구성하려면 다음과 같이 하세요.

  1. @realm/react 에서 제공자 를 가져옵니다.

  2. AppProvider 구성.

  3. UserProvider를 구성하여 AppProvider 내에 중첩시킵니다.

  4. 객체 모델을 RealmProvider의 schema 프롭에 전달합니다.

  5. FlexibleSyncConfiguration 객체를 생성합니다.

  6. SyncConfiguration 객체를 sync 프롭에 전달하거나 객체를 인라인으로 추가하세요.

  7. 초기 구독을 설정하거나 RealmProvider 하위 구성 요소에 새 구독을 만듭니다.

  8. 다른 구성 객체 속성을 RealmProvider 에 프롭으로 추가하여 Realm을 추가로 구성합니다.

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[YourObjectModel]}
          sync={{
            flexible: true,
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects(YourObjectModel));
              },
            },
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

RealmProvider 구성 및 사용에 대한 자세한 내용은 Realm 구성 페이지를 확인하세요.

구성 옵션

구성 객체 의 속성과 일치하는 소품을 설정하여 RealmProvider 를 구성할 수 있습니다. fallback 및 realmRef 소품을 설정할 수도 있습니다.

  • realmRef
    useRef과 함께 사용하여 구성된 영역을 RealmProvider 외부의 프로세스에 노출합니다. 이는 클라이언트 재설정 폴백(fallback) 같은 경우에 유용할 수 있습니다.
  • fallback
    영역이 열리기를 기다리는 동안 렌더링됩니다. 로컬 영역은 일반적으로 fallback 속성이 필요하지 않을 정도로 빠르게 열립니다.

특정 경로에서 동기화된 Realm 열기

버전 realm@11.6.0의 새로운 기능

AppConfig.baseFilePath 및 Realm.BaseConfig.path 사용 클라이언트 장치에서 Realm 및 메타데이터 파일이 저장되는 위치를 제어할 수 있습니다.

이렇게 하려면 AppProvider.baseFilePath을(를) 설정합니다. baseFilePath이(가) 설정되지 않은 경우 현재 작업 디렉토리가 사용됩니다. RealmProvider.sync.path을(를) 설정하여 더 많은 제어를 할 수도 있습니다.

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync({customBaseFilePath}) {
  return (
    <AppProvider id={APP_ID} baseFilePath={customBaseFilePath}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          path={customRealmPath}
          schema={[Profile]}
          sync={{
            flexible: true,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}
import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
type AppWrapperSyncProps = {
  customBaseFilePath: string;
};
function AppWrapperSync({customBaseFilePath}: AppWrapperSyncProps) {
  return (
    <AppProvider id={APP_ID} baseFilePath={customBaseFilePath}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          path={customRealmPath}
          schema={[Profile]}
          sync={{
            flexible: true,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

baseFilePath 이 설정된 경우 메타데이터는 항상 <baseFilePath>/mongodb-realm/ 에 저장됩니다. baseFilePath 설정되지 않은 경우 메타데이터는 <Realm.defaultPath>/mongodb-realm 에 저장됩니다.

Realm 파일이 정확히 저장되는 위치는 Realm.BaseConfiguration.path를 설정하는 방법에 따라 달라질 수 있습니다.

  • Realm.Configuration.path 설정되지 않았고 baseFilePath이(가) 설정되었습니다. Realm 파일은 baseFilePath에 저장됩니다.

  • Realm.Configuation.path 상대경로로 설정되어 있습니다. Realm 파일이 baseFilePath을(를) 기준으로 저장됩니다.

  • Realm.Configuration.path 절대 경로입니다. Realm 파일은 Realm.Configuration.path에 저장됩니다.

오프라인 상태에서 동기화된 Realm에 액세스

다음 하위 섹션에서는 오프라인 상태에서 백그라운드 동기화를 사용하여 Realm에 액세스하는 방법을 보여줍니다. 이렇게 하려면 캐시된 사용자와 OpenRealmBehaviorConfiguration 객체를 사용합니다.

RealmProvider의 동기화 구성 내에서 선택적 newRealmFileBehavior 및 existingRealmFileBehavior 필드를 OpenRealmBehaviorConfiguration 객체로 설정하여 백그라운드 동기화를 활성화합니다.

백그라운드 동기화를 통해 즉시 또는 시간 초과 후에 영역을 열 수 있습니다.

참고

최초 로그인 시에는 네트워크 연결이 필요합니다.

사용자가 앱에 가입하거나 클라이언트의 기존 계정으로 처음으로 로그인하는 경우 클라이언트가 네트워크에 연결되어 있어야 합니다. 캐시된 사용자 자격 증명을 확인하면 오프라인에서 영역을 열 수 있지만 이는 사용자가 이전에 온라인 상태에서 로그인한 적이 있는 경우에만 가능합니다.

백그라운드 동기화로 즉시 액세스

동기화된 영역이 서버에서 데이터를 다운로드하는 동안 사용자에게 부분 데이터를 표시하기 위해 백그라운드에서 변경 사항을 동기화할 수 있습니다. 이를 통해 사용자 환경이 차단되는 것을 방지합니다. 사용자 기기가 오프라인 상태가 될 수 있는 애플리케이션의 경우 백그라운드에서 변경 사항을 동기화하는 것이 좋습니다. 백그라운드에서 변경 사항을 동기화하려면 동기화된 영역을 동시에 엽니다.

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperOfflineSync() {
  const realmAccessBehavior = {
    type: 'openImmediately',
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}
import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperOfflineSync() {
  const realmAccessBehavior: Realm.OpenRealmBehaviorConfiguration = {
    type: Realm.OpenRealmBehaviorType.OpenImmediately,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

백그라운드 동기화를 통한 시간 초과 후 액세스

데이터를 동기화하고 싶지만 사용자가 인터넷에 연결되어 있는지 확실하지 않은 환경인 경우 timeOut을(를) 지정합니다. 다음 중 하나에 해당하면 자동으로 영역이 열립니다.

  • 제한 시간이 경과되었습니다.

  • 영역이 완전히 다운로드되었습니다.

영역이 시간이 초과되기 전에 다운로드를 완료하지 않으면 초기 동기화가 백그라운드에서 계속 진행됩니다.

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperTimeoutSync() {
  const realmAccessBehavior = {
    type: 'downloadBeforeOpen',
    timeOutBehavior: 'openLocalRealm',
    timeOut: 1000,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}
import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperTimeoutSync() {
  const realmAccessBehavior: Realm.OpenRealmBehaviorConfiguration = {
    type: 'downloadBeforeOpen',
    timeOutBehavior: 'openLocalRealm',
    timeOut: 1000,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

@realm/react 제공자 및 훅

@realm/react 동기화된 Realm과 해당 데이터 작업을 간소화하는 컨텍스트 제공자와 후크가 있습니다. 각 제공자의 페이지를 참조하여 제공자와 제공자의 후크에 대해 알아보세요.

돌아가기

데이터 동기화

다음

Flexible Sync 구독 관리