리액트 네이티브의 로컬 DB를 무엇으로 구성할까 고민하고 많이 찾아봤었다.

파이어베이스 부터 시작해서 realms 까지도 생각했지만 현 상황에서 sqlite에 대한 정보들이 가장 쉽고 빠르게 진행할 수 있었다.

하지만 국내에 공유된 sqlite (패키지 : andpor의 react-native-sqlite-storage)는 안드로이드 API 30에서 심각한 오류가 발생한다.

바로 Open database failed 로 DB가 아예 연결이 안된다. 하지만 패키지의 업데이트는 오래전부터 멈췄다.

sqlite로 DB를 구성했던 해외 앱 개발자들은 난관에 봉착했고 원인을 찾기 시작했다.

나는 이 이슈가 있는 지 1년이 넘은 지금 앱을 다 만들고 구글 플레이에 등록되고 나서야 최신 기기들에서 작동이 되지 않음을 알게되었고 이제서야 잘못된 것을 알았다.

그래서 구글을 검색해봤지만 국내 정보로는 이 이슈에 대한 내용이 없고 전부 react-native-sqlite-storage 를 이용해서 개발하는 방법에 대해서만 있다. 아마 당시에는 문제가 없었던 듯 하다.

아무튼 API 30 이슈는 해외 개발자들이 react-native-sqlite-storage 이슈로 등록했고 사람들이 이 이슈를 해결하기 위해 또 다른 패키지를 만들었다.

이슈로 등록된 글 : https://github.com/andpor/react-native-sqlite-storage/issues/462

이 이슈로 인해 사용자들이 풀리퀘스트(PR)을 받아 스스로 수정하기 시작했다. https://github.com/andpor/react-native-sqlite-storage/pull/494

이렇게 만들어진 패키지는 https://www.npmjs.com/package/react-native-sqlite-storage-api30 이다.

이슈 해결 방법

1. 임시 패키지를 설치한다. (임시라 함은 절대 기존 공식 패키지와 별도로 사용자들이 만든 패키지 이기 때문이다.)

npm i --save react-native-sqlite-storage-api30

2. 기존 패키지를 삭제한다. 안그러면 같은 이름의 패키지가 있다가 빌드 오류 난다.

npm uninstall react-native-sqlite-storage

나는 React Native 0.60 이기 때문에 pod install 처리만 하면된다. 0.59이하는 Link 작업해야 한다.

cd ios && pod install && cd ..

3. 프로젝트 폴더/react-native.config.js 파일 수정

기존 파일이 이렇게 되어 있을 것이다.

module.exports = {
... 생략 
    dependencies: {
        "react-native-sqlite-storage": {
            platforms: {
                android: {
                    sourceDir:
                        "../node_modules/react-native-sqlite-storage/platforms/android-native",
                    packageImportPath: "import io.liteglue.SQLitePluginPackage;",
                    packageInstance: "new SQLitePluginPackage()"
                }
            }
        }
    },
... 생략 

위 부분을 아래와 같이 수정한다.

module.exports = {
... 생략 
    dependencies: {
        "react-native-sqlite-storage-api30": {
            platforms: {
                android: {
                    sourceDir:
                        "../node_modules/react-native-sqlite-storage-api30/platforms/android-native",
                    packageImportPath: "import io.liteglue.SQLitePluginPackage;",
                    packageInstance: "new SQLitePluginPackage()"
                }
            }
        }
    },
... 생략 

4. 이제 실제 구성한 페이지들의 상단에 import 했던 부분들을 수정한다.

기존에는 이렇게 임포트해 와서 쓰고 있을 것이다.

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

저렇게 불러오는 부분을 전부 아래처럼 바꾸어 쓰면 된다.

import SQLite from "react-native-sqlite-storage-api30";

이렇게 임시 구성이 끝났다.

현재 앱의 DB 구성을 바로 바꿀 수 없어서 이 패키지를 걷어 내지 못했지만 최신 OS 기기들에서 DB가 작동 안되는 큰 이슈를 임시로 수정해서 끌어안고 갈 수 없다.

개인적으로는 로컬 DB 선택을 고민한다면 해당 패키지는 제외시키는 것을 추천한다.