[React Native] SQLite 사용하기

React Native 버전을 0.59에서 0.61로 업데이트하면서 Hermes를 사용해보기로 했다.

 

Hermes 설정을 완료하고 앱을 구동했으나 다음과 같은 에러가 발생했다.

RangeError: Maximum call stack size exceeded, js engine:hermes

릴리스 버전으로 빌드를 시도해봤지만 메모리 문제로 빌드가 되지 않았다.

gradle emitting JVM memory status event {Maximum: 1431830528, Committed: 434634752}

이유가 무엇인지 찾아보니 앱에서 JSON 파일을 사용하고 있었는데 이 파일이 너무 커서 생긴 문제였다.

 

이 문제를 해결하기 위해 Hermes를 안쓰고 해봤지만 앱 사이즈가 0.59 일 때보다 커졌다.

 

그래서 Hermes를 쓰면서 동작하게 할 수 있는 방법을 찾다가 SQLite를 사용하기로 했다.

 

여러 라이브러리가 있지만 react-native-sqlite-storage를 이용했다.

 

android/src/main/assets/data 로 디렉토리를 만들고 파일을 넣는다.

다음과 같이 하면 만든 DB 파일에 쉽게 접근할 수 있었다.

import SQLite from 'react-native-sqlite-storage';

class App extends Component {
  constructor() {
    super();
    const db = SQLite.openDatabase({
      name: 'test.db',
      location: 'deault',
      createFromLocation: '~data/test.db'
    },
    () => {},
    error => console.log(err));

    this.state = {
      db,
      data: []
    }
  }

  componentWillUnmount() {
    const { db } = this.state;
    db.close();
  }

  componentDidMount() {
    const { db } = this.state;

    db.transaction(tx => {
      tx.executeSql('SELECT * FROM test;', [], (tx, results) => {
        const rows = results.rows;
        const data = rows.raw().map(v => v);

        this.setState({ data });
      });
    });
  }

  ...
}

$  npm install react-native-sqlite-storage

하지만 위와 같이 설치하면 되는데 막상 구동시켜보면 아래와 같은 에러가 나왔다.

java.lang.NoSuchMethodError: No interface method pushMap

다음과 같이 패치가 된 것을 설치하면 더이상 java.lang.NoSuchMethodError는 나오지 않았다.

$ npm install react-native-sqlite-storage@andpor/react-native-sqlite-storage#pull/405/head

 

참고 문헌

1. https://github.com/facebook/hermes/issues/135

2. https://dev-yakuza.github.io/ko/react-native/react-native-sqlite-storage/

3. https://github.com/andpor/react-native-sqlite-storage

4. https://github.com/andpor/react-native-sqlite-storage/issues/387#issuecomment-575307816