RealmProvider(@realm/react)

프롭

BaseConfiguration 의 모든 속성은 프롭으로 전달할 수 있습니다.

RealmProvider 동작을 정의하는 더 많은 프롭이 있습니다.

• fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined

  Realm이 열리는 동안 렌더링할 폴백 컴포넌트입니다.

• closeOnUnmount?: boolean

  기본값은 true입니다. false로 설정하면 구성요소가 마운트 해제될 때 영역이 닫히지 않습니다.

• realmRef?: React.MutableRefObject<Realm | null>

  영역 인스턴스에 대한 참조입니다. 이는 영역 범위 외부의 영역 인스턴스에 액세스해야 하는 경우 유용합니다.

• children: React.ReactNode

RealmProvider로 Realm 구성하기

다음 두 가지 방법으로 RealmProvider를 구성할 수 있습니다.

• @realm/react에서 직접 RealmProvider 가져오기

• createRealmContext()을 사용하여 RealmProvider을 구성하고 후크를 생성하세요.

이 섹션에서는 @realm/react 에서 직접 가져온 RealmProvider 를 구성하는 방법에 대해 자세히 설명합니다. createRealmContext() 사용에 대한 자세한 내용은 createRealmContext()를 사용하여 컨텍스트 생성을 참조하세요.

객체 모델은 대부분의 영역 구성의 일부입니다. Realm 및 데이터 모델에 대해 자세히 알아보려면 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>
  );
}

import React from 'react';
import {RealmProvider} from '@realm/react';
function AppWrapperLocal() {
  return (
    <RealmProvider schema={[YourObjectModel]}>
      <RestOfApp />
    </RealmProvider>
  );
}

둘 이상의 Realm 구성

@realm/react에서 RealmProvider를 가져오면 해당 공급자는 특정 컨텍스트를 가지며 단일 영역과 연결됩니다. 둘 이상의 영역을 구성해야 하는 경우 createRealmContext()를 사용하여 각 영역에 대해 새 제공자를 인스턴스화합니다.

useRealm(), useQuery() 또는 useObject()를 @realm/react에서 직접 가져오는 경우 해당 후크는 기본 영역 컨텍스트를 사용합니다. 둘 이상의 영역으로 작업하려면 createRealmContext() 결과에서 새 영역 제공자와 관련 후크를 구조화해야 합니다. 어떤 제공자와 후크를 사용하고 있는지 혼동하지 않도록 네임스페이스 제공자를 지정해야 합니다.

자세한 가이드는 둘 이상의 Realm 노출하기를 참조하세요.

createRealmContext()에 대한 자세한 내용은 이 페이지의 "createRealmContext()를 사용하여 컨텍스트 만들기"를 참조하세요.

RealmProvider Hooks

useRealm(): Realm

const CreatePersonInput = () => {
  const [name, setName] = useState('');
  const realm = useRealm();
  const handleAddPerson = () => {
    realm.write(() => {
      realm.create('Person', {_id: PERSON_ID, name: name, age: 25});
    });
  };
  return (
    <>
      <TextInput value={name} onChangeText={setName}  />
      <Button
        onPress={() => handleAddPerson()}
        title='Add Person'
      />
    </>
  );
};

useObject<T>(type, primaryKey): T & Realm.Object<T> | null

const TaskItem = ({_id}: {_id: number}) => {
  const myTask = useObject(Task, _id);
  return (
    <View>
      {myTask ? (
        <Text>
          {myTask.name} is a task with the priority of: {myTask.priority}
        </Text>
      ) : null}
    </View>
  );
};

useQuery<T>(type, query?, deps?): Realm.Results<T & Realm.Object<T>>

const TaskList = () => {
  const [priority, setPriority] = useState(4);
  // filter for tasks with a high priority
  const highPriorityTasks = useQuery(
    Task,
    tasks => {
      return tasks.filtered('priority >= $0', priority);
    },
    [priority],
  );
  // filter for tasks that have just-started or short-running progress
  const lowProgressTasks = useQuery(Task, tasks => {
    return tasks.filtered(
      '$0 <= progressMinutes && progressMinutes < $1',
      1,
      10,
    );
  });
  return (
    <>
      <Text>Your high priority tasks:</Text>
      {highPriorityTasks.map(taskItem => {
        return <Text>{taskItem.name}</Text>;
      })}
      <Text>Your tasks without much progress:</Text>
      {lowProgressTasks.map(taskItem => {
        return <Text>{taskItem.name}</Text>;
      })}
    </>
  );
};

createRealmContext()를 사용하여 컨텍스트 생성

createRealmContext(realmConfig?): RealmContext

대부분의 경우 둘 이상의 영역을 구성해야 하는 경우에만 createRealmContext()를 사용합니다. 그렇지 않으면 RealmProvider 및 후크를 @realm/react에서 직접 가져와야 합니다.

createRealmContext() 메서드는 지정된 구성이 있는 영역 에 대해 React Context 객체 생성합니다.Context 객체 에는 다음이 포함됩니다.

• 하위 구성 요소를 감싸고 후크에 대한 액세스 제공하는 컨텍스트 제공자(다른 곳에서는 라고 함) 구성 요소입니다.RealmProvider

• 구성된 영역에 액세스하는 다양한 사전 빌드된 후크.

자세한 가이드는 둘 이상의 Realm 노출하기를 참조하세요.

매개변수

• realmConfig?: Realm.Configuration BaseConfiguration 의 모든 속성을 사용할 수 있습니다.

반환

• RealmContext RealmProvider 구성요소와 useRealm, useQuery 및 useObject 후크를 포함하는 객체입니다.