Drizzle와 Expo SQLite 연동하기

**공식 웹사이트**에 따르면, Expo는 React Native 애플리케이션을 개발, 빌드, 배포하기 위한 도구 생태계입니다.
Hermes JavaScript 런타임과 Metro 번들러로 구동되며, Drizzle Expo 드라이버는 이 둘을 네이티브로 지원하도록 설계되었습니다.

Drizzle ORM은 Expo SQLite를 위한 최고의 툴킷을 제공합니다:

Expo SQLite를 위한 네이티브 ORM 드라이버 ✅
Drizzle Kit을 통한 마이그레이션 생성 및 애플리케이션 내 번들링 지원 ✅
Drizzle Studio 개발 도구 플러그인으로 기기 내 데이터베이스 탐색 ✅
실시간 쿼리(라이브 쿼리) 지원 ✅

npm

yarn

pnpm

bun

npm i drizzle-orm expo-sqlite@next
npm i -D drizzle-kit

yarn add drizzle-orm expo-sqlite@next
yarn add -D drizzle-kit

pnpm add drizzle-orm expo-sqlite@next
pnpm add -D drizzle-kit

bun add drizzle-orm expo-sqlite@next
bun add -D drizzle-kit

import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite/next";

const expo = openDatabaseSync("db.db"); // 데이터베이스 연결
const db = drizzle(expo); // Drizzle ORM 초기화

await db.select().from(users); // 사용자 데이터 조회

실시간 쿼리(Live Queries)

useLiveQuery 훅을 사용하면 Drizzle 쿼리를 반응형으로 만들 수 있습니다:

import { useLiveQuery, drizzle } from 'drizzle-orm/expo-sqlite';
import { openDatabaseSync } from 'expo-sqlite/next';
import { Text } from 'react-native';
import * as schema from './schema';

// 데이터베이스 변경 리스너 활성화
const expo = openDatabaseSync('db.db', { enableChangeListener: true });
const db = drizzle(expo);

const App = () => {
  // 데이터가 변경될 때 자동으로 리렌더링됨
  const { data } = useLiveQuery(db.select().from(schema.users));
  return {JSON.stringify(data)};
};

export default App;

Expo SQLite 마이그레이션을 Drizzle Kit으로 관리하기

Drizzle Kit을 사용해 SQL 마이그레이션을 생성할 수 있습니다.
진행하기 전에 Drizzle 마이그레이션이 어떻게 동작하는지 확인하세요.
Expo / React Native에서는 SQL 마이그레이션을 앱에 번들링해야 하며, 이를 지원합니다.

Babel 플러그인 설치

SQL 마이그레이션 파일을 번들에 문자열로 직접 포함시키려면 다음 플러그인이 필요합니다.

npm install babel-plugin-inline-import

설정 파일 업데이트

babel.config.js, metro.config.js, 그리고 drizzle.config.ts 파일을 업데이트해야 합니다.

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ['babel-preset-expo'],
    plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 이 부분 추가
  };
};

const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push('sql'); // <--- 이 부분 추가

module.exports = config;

Drizzle Kit 설정에서 dialect: 'sqlite'와 driver: 'expo'를 반드시 포함해야 합니다.

import type { Config } from 'drizzle-kit';

export default {
	schema: './db/schema.ts',
	out: './drizzle',
  dialect: 'sqlite',
	driver: 'expo', // <--- 매우 중요
} satisfies Config;

마이그레이션 생성하기

SQL 스키마 파일과 drizzle.config.ts 파일을 생성한 후, 마이그레이션을 생성할 수 있습니다.

npx drizzle-kit generate

앱에 마이그레이션 추가하기

이제 ./drizzle 폴더에서 migrations.js 파일을 여러분의 Expo/React Native 앱으로 가져와야 합니다. 앱 시작 시 마이그레이션을 실행하려면 커스텀 useMigrations 마이그레이션 훅을 사용하거나, 원하는 대로 useEffect 훅에서 수동으로 실행할 수 있습니다.

import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite/next";
import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator';
import migrations from './drizzle/migrations';

const expoDb = openDatabaseSync("db.db");

const db = drizzle(exoDb);

export default function App() {
  const { success, error } = useMigrations(db, migrations);

  if (error) {
    return (
      
        마이그레이션 오류: {error.message}
      
    );
  }

  if (!success) {
    return (
      
        마이그레이션 진행 중...
      
    );
  }

  return ...여러분의 애플리케이션 컴포넌트;
}