[React Native] SQLite 사용하기

앱 종료 후 재시작에도 저장된 데이터가 유지 될 수 있도록 데이터를 DB에 넣어 관리하자

외부 DB를 사용 할 수도 있지만, 메모 & 버킷 리스트 데이터는 아무리 많이 생성해도

상대적으로 데이터가 적을 것이라고 생각되서 관리는 SQLite 를 사용해도 충분해 보인다.

 

1. 패키지 설치

네이티브 환경에서 운영할 수도 있지만, expo 에서도 어느 정도 SQLite 기능을 지원하며

지원하는 기능들은 구현하고자 하는 모든 범위를 커버할 수 있어서 아래 패키지를 설치했다.

npm install expo-sqlite

 

2. 테이블 생성 함수 작성

먼저 데이터 베이스 입출력을 담당할 클래스를 생성하고 db가 될 파일 이름을 지정한다.

class DbManager {
  constructor() {
    this.db = SQLite.openDatabase('database.db');
  }
 }
 
 export default DbManager;

 

다음으로 db에 입력하는 이름을 가진 테이블이 없는 경우에만 생성하는 함수를 작성한다.

class DbManager {
  constructor() {
    this.db = SQLite.openDatabase('database.db');
  }
  
  createDb(tableName, columns){
    const columnsInfo = columns.map(column => `${column.name} ${column.type}`).join(',');
    
    this.db.transaction(tx => {
      tx.executeSql(
        `CREATE TABLE IF NOT EXISTS ${tableName} (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          ${columnsSql}
        );`,
        [],
        () => console.log(`Table ${tableName} created successfully`), // 테이블 생성 성공 시 
        (txObj, error) => console.error(`Error creating table ${tableName}:`, error) // 테이블 생성 실패 시
      );
    });
  }
 }
 
 export default DbManager;

db.transaction 으로 트렌젝션을 실행하고

executeSql 함수로 SQL 쿼리를 실행한다. id는 테이블에 모두 필요하므로 고정으로 넣고

각 테이블 별로 필요한 필드 이름과 타입은 해당 컴포넌트에서 동적으로 받아온다.

그 다음에 오는 빈 배열 ([])의 의미는 SQL 쿼리에 동적으로 들어갈 값을 적어주는 것인데, 테이블 생성 함수에는 필요 없으므로 공란으로 둔다.

트렌젝션 성공 여부에 따라 다른 값을 출력하도록 구현한다.

 

3. 데이터 삽입 함수 작성

insertItem(tableName, columns, values) {
    return new Promise((resolve, reject) => {
      const columnNames = columns.map(col => col.name).join(', ');
      const placeholders = columns.map(() => '?').join(', ');

      this.db.transaction(tx => {
        tx.executeSql(
          INSERT INTO ${tableName} (${columnNames}) VALUES (${placeholders});,
          values,
          (_, result) => resolve(result),
          (_, error) => reject(error)
        );
      });
    });
  }

데이터를 받아 columns 를 묶고, 입력된 데이터 필드 수 만큼 자리 표시자(placehoders)를 생성하여

쿼리를 작성한다. 그리고 그 값에 들어갈 순서대로 values를 지정하여 테이블에 데이터를 삽입힌다.

 

예를 들어 아래와 같이 코드를 작성하는 경우

const columns = [
	{ name: 'value', type: 'TEXT' },
	{ name: 'created_at', type: 'TEXT' }
    ];

const values = ['test value', '2024-11-20'];

db.insertItem(test, columns, values);

 

실제 작동하는 쿼리는 아래와 같이 작동된다고 볼 수 있다.

INSERT INTO test (value, created_at) VALUES (?, ?), ['test value', '2024-11-20']

위 부분에서 자리 표시자( ? <- 해당 )는 필드에 해당하는 값이 들어갈 것을 미리 예약하고

뒤이어 들어오는 배열 순서에 맞게 데이터를 배치한다.

해당 방법으로 데이터를 입력하는 것은, 사용자가 데이터를 입력했을 때, 악의적인 데이터 입력을 방지하고자

값은 따로 처리하여 데이터를 입력하는 것이라고 한다.

 

4. 데이터 조회 함수 작성

getItems(tableName) {
    return new Promise((resolve, reject) => {
      this.db.transaction(tx => {
        tx.executeSql(
          `SELECT * FROM ${tableName};`,
          [],
          (_, { rows }) => resolve(rows._array),
          (_, error) => reject(error)
        );
      });
    });
  }

위 코드는 지정한 테이블의 모든 데이터를 조회하는 함수 예제로

특정 데이터를 조회하기 위한 코드 수정은 입력 파라미터에 id 등 특정 조건을 받아

해당 값으로 데이터를 조회하는 함수로 변경하면 된다.