문서 메뉴

문서 홈애플리케이션 개발Atlas Device SDK

포함된 객체 - React Native SDK

이 페이지의 내용

  • 임베디드 객체 생성
  • 예제
  • 임베디드 객체 속성에서 컬렉션 쿼리
  • 예제
  • 내장된 객체 속성 업데이트
  • 예제
  • 포함된 객체 덮어쓰기
  • 예제
  • 내장된 객체 삭제
  • 예제

포함된 객체를 생성하려면 포함된 객체의 인스턴스를 상위 객체의 속성에 할당합니다.

다음 CreateContact 예제에서는 Address 객체가 포함된 새 Contact 객체를 만듭니다.

CreateContact 컴포넌트는 다음을 수행합니다.

  • 연락처의 이름과 주소 세부 정보를 나타내는 React 상태 변수를 만듭니다.

  • 컴포넌트 내에서 useRealm() 훅을 호출하여 열린 Realm 인스턴스에 대한 액세스 권한을 얻습니다.

  • 연락처 이름 및 주소의 TextInput 값을 기반으로 쓰기 트랜잭션을 수행하여 새 Address 포함된 객체와 Contact 상위 객체를 생성하는 컴포넌트 메서드 submitContact() 를 생성합니다.

  • onPress 추가 을(를) 호출하는 "연락처 제출" 버튼의 submitContact() 이벤트입니다.

1const CreateContact = () => {
2 const [name, setContactName] = useState('');
3 const [street, setStreet] = useState('');
4 const [city, setCity] = useState('');
5 const [country, setCountry] = useState('');
6 const [postalCode, setPostalCode] = useState('');
7 const realm = useRealm();
8
9 const submitContact = () => {
10 // Create a Contact within a write transaction
11 realm.write(() => {
12 // Create an embedded Address object
13 const address = {
14 street,
15 city,
16 country,
17 postalCode,
18 };
19
20 realm.create('Contact', {
21 _id: new Realm.BSON.ObjectID(),
22 name,
23 // Embed the address in the Contact object
24 address,
25 });
26 });
27 };
28 return (
29 <View>
30 <TextInput value={name} onChangeText={text => setContactName(text)} />
31 <TextInput value={street} onChangeText={text => setStreet(text)} />
32 <TextInput value={city} onChangeText={text => setCity(text)} />
33 <TextInput value={country} onChangeText={text => setCountry(text)} />
34 <TextInput
35 value={postalCode}
36 onChangeText={text => setPostalCode(text)}
37 />
38 <Button
39 title='Submit Contact'
40 onPress={submitContact}
41 />
42 </View>
43 );
44};

점 표기법을 사용하여 포함된 객체 속성 값을 기준으로 객체 컬렉션을 필터링하거나 정렬할 수 있습니다.

다음 ContactList 예제에서는 포함된 Address 객체를 필터링하고 쿼리합니다.

ContactList 컴포넌트는 다음을 수행합니다.

  • Contact 클래스를 useQuery 후크에 전달하여 연락처에 대한 쿼리를 전달합니다.

  • 쿼리 "name == 'John Smith'"collection.filtered() 를 전달하여 이름이 'John Smith'인 연락처를 필터링합니다.

  • 점 표기법을 사용하여 연락처의 도로명 주소를 조회합니다.

포함된 객체의 속성을 업데이트하려면 쓰기 트랜잭션에서 속성을 수정합니다.

다음 UpdateContact 예에서는 포함된 Address 객체의 street 속성을 업데이트합니다.

UpdateContact 컴포넌트는 다음을 수행합니다.

  • 연락처의 새 주소를 나타내는 React 상태 변수를 생성합니다.

  • Contact 클래스를 useQuery 후크에 전달하고 구성 요소에 전달된 이름과 일치하는 연락처를 프롭으로 필터링하여 모든 연락처에 대한 쿼리를 수행합니다. .

  • 컴포넌트 내에서 useRealm() 훅을 호출하여 열린 Realm 인스턴스에 대한 액세스 권한을 얻습니다.

  • 쓰기 트랜잭션을 수행하고 연락처의 상세 주소를 street 상태 변수 값으로 설정하는 컴포넌트 메서드 updateStreet()을(를) 만듭니다.

  • street 상태 변수를 표시하고 변경하는 TextInput을(를) 렌더링합니다.

  • onPress 추가 를 호출하는 'Update Street Address' 버튼의 updateStreet() 이벤트입니다.

포함된 객체를 덮어쓰려면 쓰기 트랜잭션에서 당사자의 포함된 객체 속성을 새 인스턴스에 다시 할당합니다.

다음 OverwriteContact 예제에서는 포함된 Address 개체를 덮어씁니다.

OverwriteContact 컴포넌트는 다음을 수행합니다.

  • 연락처의 새 주소를 나타내는 React 상태 변수를 만듭니다.

  • Contact 클래스를 useQuery 후크에 전달하고 구성 요소에 전달된 이름과 일치하는 연락처를 프롭으로 필터링하여 모든 연락처에 대한 쿼리를 수행합니다. .

  • 컴포넌트 내에서 useRealm() 훅을 호출하여 열린 Realm 인스턴스에 대한 액세스 권한을 얻습니다.

  • 쓰기 트랜잭션을 수행하는 구성요소 메소드 updateAddress()을(를) 생성하고 Contact 객체의 기존 주소를 덮어쓰는 새 Address 객체를 생성합니다.

  • 새 주소의 상태 변수를 표시하고 변경하는 TextInput 구성요소를 렌더링합니다.

  • onPress 추가 를 호출하는 'Overwrite Address' 버튼의 updateAddress() 이벤트입니다.

Realm은 포함된 객체에 계단식 삭제를 사용합니다. 포함된 객체를 삭제하려면 포함된 객체의 상위 항목을 삭제합니다.

다음 DeleteContact 예제에서는 포함된 객체와 해당 상위 개체를 삭제합니다.

DeleteContact 컴포넌트는 다음을 수행합니다.

  • Contact 클래스를 useQuery 후크에 전달하여 연락처에 대한 쿼리를 전달합니다.

  • Contact 구성 요소에 prop 으로 전달된 이름과 일치하는 객체를 필터링합니다.

  • 컴포넌트 내에서 useRealm() 훅을 호출하여 열린 Realm 인스턴스에 대한 액세스 권한을 얻습니다.

  • 쓰기 트랜잭션(write transaction)을 수행하는 구성 요소 메서드 deleteContact() 을(를) 생성하고 Realm.delete() 를 호출하여 Contact 객체를 제거합니다.

  • onPress 추가 을(를) 호출하는 "연락처 삭제" 버튼의 deleteContact() 이벤트입니다.

← UUID - React Native SDK