React native realm (typescript) 적용하기

시작하기

react natvie 애플리케이션에서 로컬db로 저장하는 방법은 여러종류가 있습니다.
sqlite, AsyncStorage, realm 등이 있습니다.
이중에 realm을 사용해보도록 하겠습니다. 공식홈페이지에서는 기존 스토리지보다 더욱빠르고 향상된 기능을 제공한다고 합니다.

설치하기

react-native v0.60이상에서 작성하였습니다.

npm install --save realm

realm 패키지를 설치합니다.

cd ios && pod install && cd ..

ios에 cocoapod을 설치합니다.
다음으로 realm studio를 설치합니다.

Realm studio

시뮬레이터에서 사용하는 realm 데이터를 ui로 시각화해서 보기 위한 툴이 있습니다.
realm studio가 그러한 서비스를 제공합니다. MySQLWorkbench, Robo 3T와 흡사한 기능을 하는 것이죠.
Realm studio홈페이지에서 해당하는 운영체제로 다운로드합니다.

시작하기

간단한 user데이터를 realm에 저장해보겠습니다.

src/db/index.ts

import Realm from "realm";

export interface IUser {
  id: string;
  name: string;
  email: string;
}

class User {
  public static schema: Realm.ObjectSchema;
}

User.schema = {
  name: "User",
  primaryKey: "id",
  properties: {
    id: "string",
    name: "string",
    email: "string",
  },
};

let realm = new Realm({ schema: [User] });

export default realm;

User의 스키마를 정해줍니다.

다음으로 생성을 하는 유저 생성하는 기능을 추가해보겠습니다.

App.tsx

import React from "react";
import { View, Text } from "react-native";
import realm from "./src/db";

const App = () => {
  const createUser = () => {
    realm.write(() => {
      realm.create("User", {
        id: "테스트유저아이디",
        name: "테스트유저이름",
        email: "테스트유저이메일@gmail.com",
      });
    });
  };
  return (
    <View>
      <Text>Realm</Text>
      <Button title="Create User" onPress={createUser} />
    </View>
  );
};

설정이 완료되었습니다.

데이터 저장하기

App.tsx

import React, { useEffect } from "react";
import { View, Text } from "react-native";
import Realm from "realm";
import realm from "./src/db";

const App = () => {
  useEffect(() => {
    Realm.open({}).then((realm) => {
      console.log("Realm is located at: " + realm.path);
    });
  }, []);
  const createUser = () => {
    // ...
  };
  return (
    <View>
      <Text>Realm</Text>
      <Button title="Create User" onPress={createUser} />
    </View>
  );
};

다음과 같이 입력하면 시뮬레이터에서 로컬로 저장했을시 실제 데이터의 위치 경로를 알려줍니다.

Realm is located at: /Users/<Name>/Library/Developer/CoreSimulator/Devices/<Value>/data/Containers/Data/Application/<Value>/Documents/default.realm

위와 같이 console이 찍히는 것을 확인할 수 있습니다.
console을 확인하는 방법으로는 command(ctrl) + d를 입력해서 debug를 선택하면 됩니다.

open /Users/<Name>/Library/Developer/CoreSimulator/Devices/<Value>/data/Containers/Data/Application/<Value>/Documents/default.realm

터미널을 열어서 다음 path를 입력하면 이전에 설치했던 realm studio가 실행됩니다.

이전에 생성했던 createUser버튼을 클릭합니다.
이후 realm을 확인하면 데이터가 추가된 것을 확인 할 수 있습니다.

데이터 불러오기

데이터를 저장했으면 불러와서 사용을 해야합니다.

App.tsx

import React, { useEffect, useState } from "react";
import { View, Text } from "react-native";
import Realm from "realm";
import realm from "./src/db";

const App = () => {
  const [user, setUser] = useState<IUser | null>(null);
  useEffect(() => {
    const getUser = async () => {
      try {
        let localUser: Results<IUser> = await realm.objects("User");
        setUser(localUser[0]);
      } catch (e) {
        Alert.alert("유저데이터가 없어요");
      }
    };
    getUser();
  }, []);
  const createUser = () => {
    // ...
  };
  return (
    <View>
      <Text>Realm</Text>
      <Text>Email: {user?.email}</Text>
      <Button title="Create User" onPress={createUser} />
    </View>
  );
};

async await와 try catch를 이용해서 유저를 불러오는데 만약 없다면 alert을 띄워줍니다.
이것으로 realm을 사용해보았습니다. 손쉬운 사용법으로 로컬 디비를 다룰수 있습니다.

React native ios build시 node: command not found Node.js 에러 해결방법 (추가: 7/13)

React native에서 npm install realm로 realm을 설치하고 나서 xcode에서 빌드를 하면 다음과 같은 에러가 나오는 경우가 있습니다.

node: command not found Node.js라는 에러이죠.

/bin/sh터미널에서 실행할 대 PATH부모 셸에서 노드를 가져와 노드가 작동하기 때문일 것으로 추측합니다. 노드가 작동하는 일반적인 터미널에서 다음과 같이 시도해보시길 바랍니다.

ln -s $(which node) /usr/local/bin/node

커맨드에 입력후 빌드시 에러가 해결되는 것을 확인할 수 있습니다.