React Native에서 SQLite 사용하기 by 휴먼스케이프

안녕하세요. 휴먼스케이프의 개발자 김병하입니다.

React Native에서 SQLite를 사용하는 방법에 대한 포스트입니다.

SQLite란?

SQLite는 서버가 아닌 클라이언트(React Native의 경우 스마트폰)의 로컬에서 동작하는 DB입니다.

휴먼스케이프에서는, 휴먼스케이프의 PGHD 수집 어플리케이션 중 하나인, 미세톡톡에서 SQLite를 사용하고 있습니다. 변동이 적은 정보인 전국 주소 정보를 SQLite를 이용하여 로컬DB에 저장합니다. 이렇게 하면, 자동완성 때마다 DB에 접근해야 하는 부하가 줄어들고, 더욱 빨리 사용자 입력에 반응할 수 있습니다.

이 포스트에선 미세톡톡을 예로, react-native-sqlite-storage 를 이용해 SQLite를 사용한 방법을 설명 드립니다.

react-native-sqlite-storage 라이브러리 설치

우선 SQLite를 사용하기 위해 react-native-sqlite-storage 모듈을 프로젝트에 설치합니다.

$ npm install — save react-native-sqlite-storage

그리고 react-native-sqlite-storage를 프로젝트에 연결합니다.

$react-native link react-native-sqlite-storage

DB 파일 생성

React Native에서 사용할 .db 확장자를 사용하는 SQLite의 DB 파일을 생성해야 합니다.

여기서는 sqlitebrowser 를 이용해 설명 드리겠습니다.

sqlite 툴(sqlitebrowser) 다운로드: https://sqlitebrowser.org/dl/

다운로드하고 설치한 후 sqlitebrowser를 실행합니다.

왼쪽 위에 [New Database] 버튼을 클릭하여 새로운 DB를 생성합니다. ‘Where’ 섹션에서 선택한 경로에 SQLite db파일인 .db 파일이 생성됩니다. 미세톡톡에서는 ‘fineDustLocalDB’ 라는 이름으로 생성했습니다.

필요한 테이블을 생성합니다. 미세톡톡에서는 모든 주소 리스트를 저장하는 ‘district’ 테이블을 생성했습니다. district 테이블에는 주소를 저장하는 text 타입의 ‘address’라는 컬럼만 존재합니다. 주소 정보는 null일 수 없고, primary key이며, unique하므로 컬럼 constraints에 NN, PK, U 항목에 체크하고 하단에 보이는 CREATE 문을 확인하고 [OK] 버튼을 눌러 테이블과 함께 DB를 생성합니다.

왼쪽 리스트에서 테이블이 제대로 생성되었는지 확인합니다.

이제 필요한 DB 파일이 완성되었습니다. 처음 생성한 위치에서 .db 파일을 확인할 수 있습니다.

프로젝트에 DB파일 추가

ios 와 android 에 각각 .db 파일을 추가해주어야 합니다.

ios 에 db 추가

finder에서 ios/[projectname]/www 폴더를 만들고, db 파일을 복사합니다.

.xcworkspace 파일을 더블클릭하여 xcode에서 프로젝트를 실행합니다.

왼쪽 탐색기에서 [project name] 하단의 [project name] 폴더를 우클릭하고, Add Files to [project name]을 선택합니다.

파일 선택 창에서 위에서 생성한 www 폴더를 선택하고 Create folder references 를 선택한 후 Add 버튼을 눌러 추가합니다.

android 에 db 추가

android/settings.gradle 파일을 열고 아래 내용을 추가합니다.

include ':react-native-sqlite-storage'
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

android/app/build.gradle 파일을 열고, dependencies 섹션에 아래 내용을 추가합니다.

implementation project(':react-native-sqlite-storage')

MainApplication.java 파일을 열고 getPackages() 메소드에 아래 내용을 추가합니다.

@Override
protected List getPackages() {
  return Arrays.asList(
    ...

    new SQLitePluginPackage()
  );
}

android/app/src/main/assets/www 폴더를 만들고 미리 생성한 sqlite DB를 복사합니다.

SQLite 사용하기

미세톡톡에서는 대한민국 동읍면 리스트를 모두 SQLite를 이용하여 ‘district’라는 테이블에 저장합니다.

DB 작업을 위해선, SQLite.openDatabase 를 호출하여, 먼저 DB를 열어야 합니다. 동읍면 정보가 변경되었을 때는 기존 테이블을 drop한 후, 동일한 이름의 ‘district’ 테이블을 새로 생성하여 새로운 동읍면 리스트를 다시 저장합니다.

아래는 주소가 업데이트 되었을 때, 혹은 앱을 처음 실행시켰을 때, 주소 리스트를 업데이트 혹은 초기화하는 코드입니다.

주소를 검색하는 화면에서는, 검색창에 입력된 글자가 입력되면, SQLite의 SELECT문에서 LIKE 검색을 통해 상위 10개의 LIKE 검색 결과를 UI에 노출합니다.

마무리

휴먼스케이프의 미세톡톡을 예로, React Native에서 SQLite를 사용하는 방법을 설명 드렸습니다. 더 자세한 사용법은 SQLite 공식 홈페이지와 react-native-sqlite-storage 공식 홈페이지를 참고해 주세요.

감사합니다.

Get to know us better! Join our official channels below.

Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io