1lines

React Native와 Realm 

로그인 정보를 App Data로 저장하기

로그인 정보를 App내에서 사용하기 위해서 모바일 App Database로 활용할 수 있는 다양한 App을 찾아 본 결과 

• SQLite
• Realm

크게는 SQLite 와 Realm을 주로 많이 사용하는 것으로 보이며, 이전에 SQLite로 개발했을 때 마치 RDB를 설계하는 듯한 느낌이 들어서

별로였었는데, Realm의 심플함에 반해서 Realm으로 넘어왔다. Mobile Database로 Realm을 추천하는 사례들도 많아졌기에 이번 App을 개발시에 적용해 보려한다. 

Realm 설치 

$ cd {React Native 프로젝트 경로}

$ npm insall --save realm

$ react-native link realm

$ cd ios 

$ pod install

이후 XCode를 실행시켜  Realm을 사용하는 방법을 알아보겠다.

Realm 사용하기 

Realm을 사용하기위한 DataBase Component 작성 

var Realm = require('realm');

const DataBase = ( props ) => {
    
    const LoginSchema = {
        name : 'Login',
        properties : {
            userId : 'string'
        }
    }

    const CategorySchema = {
        name: 'Category',
        properties: {
            categorySeqNo : 'int',
            categoryName  : 'string',
        }
    };

    const CategoryListSchema = {
        name: 'CategoryList',
        properties : {
            categoryList : { type : 'list' , objectType : 'Category' }
        }
    }

    let realm = new Realm({ schema : [LoginSchema, CategoryListSchema, CategorySchema]});

    return realm;
}

export default DataBase;

로그인의 일부 코드 

  saveUserId 함수를 보면, Realm을 이용해서 데이터를 저장하고, 가져오는 방식을 간단하게 작성해봤다.

  좀더 상세한 활용 방법 및 사용법은 https://realm.io/docs/javascript/latest/ 링크를 접속해서 확인할 수 있다. 

import React, {Component} from 'react';
import { View, Text, TextInput, StyleSheet, TouchableHighlight } from 'react-native';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import DataBase from '../../../components/database';

export default class LoginScreen extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        email   : '',
        password: '',
      }

      this.realm = DataBase();

      console.log(this.realm)
    }
      
    static navigationOptions = {
        header: null,
    }

    saveUserId = async userIdValue => {
      try {
        let login = this.realm.objects('Login');

        if(!login["0"].userId){
          this.realm.write(() =>{
            this.realm.create('Login', { userId :  userIdValue })
          });
        }
        
        console.log(login);
        console.log(login["0"].userId);

      } catch (error) {
        // Error retrieving data
        console.log(error.message);
      }
    }

로그인 화면에서 id를 입력하고 값을 가져오는 방법 위와 같이 작성하면, 아래와 같은 결과를 얻을 수 있었다. 

shj@lines.com을 4번을 입력하고 그 중 첫번째 userId만 가져오도록 한 결과이다. 

Realm에 대해서는 추후에 별도로 정리할 예정이다.