Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK

퀵 스타트 - React Native SDK

이 페이지의 내용

  • @realm/react 패키지 정보
  • Realm 앱 설정
  • 객체 모델 정의
  • Realm 구성
  • Realm 객체 작업
  • 객체 읽기, 정렬 및 필터링
  • Realm 객체 생성, 업데이트 및 삭제
  • Atlas Device Sync 추가(선택 사항)
  • 전제 조건
  • 동기화된 Realm 구성 및 액세스
  • 다음: 템플릿 앱 및 튜토리얼 확인

이 페이지에서는 React Native SDK를 통해 Realm을 사용하는 방법을 설명합니다.

시작하기 전에 Realm React Native SDK를 설치하세요.

@realm/react 패키지 정보

@ 영역/React 에서 사용되는 패키지 React Native SDK 입니다. Realm 데이터에 대한 상태 인식 React 후크를 제공합니다. 후크는 Realm 데이터를 감시하고 필요에 따라 컴포넌트를 다시 렌더링합니다.

React Native SDK 문서에서는 예시와 개념 설명을 위해 @realm/react npm 패키지를 사용합니다.

자세한 내용은 다음 페이지를 참조하세요.

Realm 앱 설정

realm 및 @realm/react 패키지를 설치한 후 영역에 액세스하고 로컬 데이터로 작업하기 전에 다음과 같이 설정해야 할 몇 가지 사항이 더 있습니다.

  • 객체 모델 정의

  • 영역 컨텍스트 객체 생성, 훅 추출, 제공자 설정을 통해 영역을 설정합니다.

객체 모델 정의

애플리케이션의 객체 모델은 영역 내에 저장할 수 있는 데이터 유형을 정의합니다. 각 object model은 영역 객체 유형이 됩니다.

Realm 객체 모델을 정의하려면 다음을 수행하세요.

  1. Realm.Object를 확장하는 클래스를 만듭니다.

  2. schema 필드를 추가합니다.

  3. schema 값에 대해 properties 및 name 속성을 포함하는 객체를 만듭니다. 이름 값은 영역의 객체 유형 간에 고유해야 합니다.

// Define your object model
export class Profile extends Realm.Object<Profile> {
  _id!: BSON.ObjectId;
  name!: string;
  static schema: ObjectSchema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: {type: 'string', indexed: 'full-text'},
    },
    primaryKey: '_id',
  };
}

자세한 내용은 Realm 객체 모델 정의를 참조하세요.

Realm 구성

데이터로 작업하려면 먼저 영역을 구성해야 합니다. 이는 @realm/react에서 컨텍스트와 제공자를 설정해야 함을 의미합니다. 자세한 내용은 Realm 구성을 참조하세요.

로컬 영역을 구성하고 액세스하려면 다음을 수행하세요.

  1. @realm/react에서 RealmProvider을(를) 가져옵니다.

  2. 객체 모델을 schema 프롭에 전달합니다.

  3. 다른 구성 객체 속성을 RealmProvider 에 프롭으로 추가합니다.

import React from 'react';
import {RealmProvider} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
export const AppWrapper = () => {
  return (
    <RealmProvider schema={[Profile]}>
      <RestOfApp />
    </RealmProvider>
  );
};

Realm 객체 작업

데이터 모델과 영역을 설정한 후에는 Realm 객체를 생성하고, 읽고, 업데이트하고, 삭제할 수 있습니다.

이러한 작업을 수행하는 구성 요소를 RealmProvider 안에 중첩해야 합니다. useRealm(), useQuery() 및 useObject() 후크를 사용하면 영역에서 읽기 및 쓰기 작업을 수행할 수 있습니다.

RealmProvider 및 해당 훅에 대한 자세한 설명은 RealmProvider(@realm/react )를 참조하세요.

객체 읽기, 정렬 및 필터링

@realm/react Realm 컬렉션 또는 단일 Realm 객체를 찾는 데 도움이 되는 후크를 제공합니다.

useQuery()의 일부로 RQL(Realm Query Language)을 사용하여 결과를 필터링하거나 정렬할 수 있습니다.

import React from 'react';
import {useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Read = () => {
  // Find
  const profiles = useQuery(Profile);
  // Sort
  const sortedProfiles = useQuery(Profile, profiles => {
    return profiles.sorted('name', false);
  });
  // Filter
  const filteredProfiles = useQuery(Profile, profiles => {
    return profiles.filtered('name == "testProfile"');
  });
  // ... rest of component
};

자세한 내용은 CRUD - 읽기 및 쿼리 데이터를 참조하세요.

후크 외부의 작업 읽기

때로는 Realm 읽기 작업을 사용해야 할 수도 있지만 React Native 구성 요소의 최상위 수준에서는 사용할 수 없습니다. 후크는 구성 요소의 최상위 수준에서만 작동하므로 이러한 상황에서는 @realm/react 후크를 사용할 수 없습니다.

대신 컬렉션에 Realm.objects를 사용하거나 단일 객체인 Realm.objectForPrimaryKey를 사용할 수 있습니다.

Realm 객체 생성, 업데이트 및 삭제

useRealm() 을(를) 사용하여 Realm에 액세스한 후 Realm 내부에서 객체를 생성, 업데이트 및 삭제할 수 있습니다. 모든 작업은 Realm.write() 트랜잭션 차단.

자세한 내용은 쓰기 트랜잭션(write transaction)을 참조하세요.

객체 생성

새 영역 객체를 생성하려면 객체 유형을 지정하고 객체의 초기 값을 전달한 후 쓰기 트랜잭션(write transaction) 차단의 영역에 추가합니다.

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
import {BSON} from 'realm';
import {useRealm} from '@realm/react';
import {Profile} from '../../models';
export const Create = () => {
  const realm = useRealm();
  const [profileName, setProfileName] = useState('');
  const addProfile = () => {
    realm.write(() => {
      realm.create(Profile, {
        _id: new BSON.ObjectId(),
        name: profileName,
      });
    });
  };
  return (
    <View>
      <Text>Create</Text>
      <TextInput
        onChangeText={setProfileName}
        value={profileName}
        placeholder="Profile name..."
      />
      <Button
        title="Add Profile"
        onPress={addProfile}
      />
    </View>
  );
};

자세한 내용은 CRUD - 생성을 참조하세요.

객체 업데이트

Realm 객체를 업데이트하려면 쓰기 트랜잭션(write transaction) 차단에서 해당 속성을 업데이트합니다.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable, TextInput} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Update = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToUpdate, setProfileToUpdate] = useState('');
  const [newProfileName, setNewProfileName] = useState('');
  const updateProfile = () => {
    const toUpdate = realm
      .objects(Profile)
      .filtered('name == $0', profileToUpdate);
    realm.write(() => {
      toUpdate[0].name = newProfileName;
    });
  };
  return (
    <View>
      <Text>Update</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToUpdate(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      {profileToUpdate && (
        <TextInput
          style={styles.textInput}
          onChangeText={setNewProfileName}
          value={newProfileName}
          placeholder="New profile name..."
        />
      )}
      <Button
        title="Update profile"
        onPress={updateProfile}
      />
    </View>
  );
};

자세한 내용은 CRUD - 업데이트를 참조하세요.

객체 삭제

Realm 객체를 삭제하려면 쓰기 트랜잭션(write transaction) 블록 내의 Realm.delete()에 객체를 전달합니다.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Delete = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToDelete, setProfileToDelete] = useState('');
  const deleteProfile = () => {
    const toDelete = realm
      .objects(Profile)
      .filtered('name == $0', profileToDelete);
    realm.write(() => {
      realm.delete(toDelete);
    });
  };
  return (
    <View>
      <Text>Delete</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToDelete(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      <Button
        title="Delete profile"
        onPress={deleteProfile}
      />
    </View>
  );
};

자세한 내용은 CRUD - 삭제를 참조하세요.

Atlas Device Sync 추가(선택 사항)

비동기화 영역을 실행한 후 Atlas Device Sync를 추가할 수 있습니다. 이를 통해 영역 데이터를 MongoDB Atlas 클러스터 및 기타 클라이언트 장치와 동기화할 수 있습니다.

Device Sync를 사용하려면 다음 몇 가지를 더 설정해야 합니다.

  • Atlas App Services에서 백엔드 생성(아래 전제 조건 참조)

  • 비동기화 영역 대신 Flexible Sync 영역 구성

전제 조건

동기화된 Realm 구성 및 액세스

Device Sync를 사용하려면 세 가지 @realm/react 공급자를 구성해야 합니다.

앱 초기화, 사용자 인증 및 객체 모델 정의를 수행 후 동기화 영역을 구성할 수 있습니다. 이는 로컬 영역을 구성하는 것과 유사합니다. 그러나 RealmProvider에 몇 가지 프롭을 추가해야 합니다.

sync 프롭을 RealmProvider 에 추가하고 FlexibleSyncConfiguration 객체를 전달합니다. 이 동기화 객체에는 flexible: true 이(가) 포함되어야 합니다. 초기 구독 도 추가해야 합니다. 동기화된 데이터를 읽거나 쓰려면 먼저 동기화 구독이 하나 이상 있어야 합니다.

동기화된 영역을 구성하고 액세스하려면 다음을 수행합니다.

  1. AppProvider 을(를) 사용하여 앱을 초기화합니다. Atlas App Services UI에서 앱 ID를 찾을 수 있습니다.

  2. 다음을 사용하여 사용자 인증 UserProvider

  3. 다음을 사용하여 동기화된 영역 구성 RealmProvider

import React from 'react';
import {Credentials} from 'realm';
import {RealmProvider, AppProvider, UserProvider, useApp} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
// Expose a sync realm
export function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            onError: (_session, error) => {
              console.log(error);
            },
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects('Profile'));
              },
              rerunOnOpen: true,
            },
          }}
          fallback={fallback}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

동기화된 영역에서 객체를 생성, 읽기, 업데이트 및 삭제하는 구문은 동기화되지 않은 영역의 구문과 동일합니다. 로컬 데이터로 작업하는 동안 백그라운드 스레드는 변경 세트를 효율적으로 통합, 업로드 및 다운로드합니다.

자세한 내용은 동기화된 Realm 구성을 참조하세요.

다음: 템플릿 앱 및 튜토리얼 확인

안내를 참조하려면 Realm React Native SDK 튜토리얼을 읽어보세요. 이 튜토리얼은 Realm과 Device Sync로 빌드된 기본 React Native 앱을 구현하고 확장합니다.

템플릿 앱을 사용하여 직접 React Native SDK를 실험해 볼 수도 있습니다. 템플릿 앱을 설정하려면 Atlas App Services 문서에서 Template Apps 를 참조하세요.

다음

Atlas Device SDK Docs에 오신 것을 환영합니다