zustand-mmkv-storage: React Native에서 Zustand를 위한 초고속 영속성

Source: Dev.to

왜 React Native에서 지속적인 상태가 필요할까요?

모바일 사용자는 앱이 자신을 “기억”해 주길 기대합니다:

• 로그인 토큰은 계속 유효해야 함
• 앱을 닫아도 장바구니가 비워지면 안 됨
• 테마 설정(다크/라이트)은 유지되어야 함
• 온보딩 흐름이 매번 다시 재생되지 않아야 함

지속성이 없으면 앱이 부실하게 느껴집니다. 좋은 지속성을 제공하면 네이티브하고 다듬어진 느낌을 줍니다.

옛날 왕: AsyncStorage

수년간 AsyncStorage가 기본 솔루션이었습니다. 간단하고 어디서든 동작하며 Zustand/Redux 같은 라이브러리와도 잘 통합됩니다.

하지만 심각한 단점이 있습니다:

• 느림: 완전 JavaScript 기반, 직렬화된 브리지 호출
• 비동기 전용: 읽기/쓰기마다 await가 필요해 UI가 차단될 수 있음
• 기본적으로 암호화 미지원
• React Native 코어 팀에 의해 폐기됨(커뮤니티 포크로 대체)

벤치마크에 따르면 MMKV는 실제 시나리오에서 AsyncStorage보다 30~100배 빠릅니다.

등장! MMKV: 현대의 챔피언

MMKV(Mobile Key‑Value)는 텐센트가 개발하고 현재는 Marc Rousavy가 유지보수하는 고성능 키‑값 저장소입니다.

주요 장점:

• C++ 로 구현되고 JSI 바인딩 제공 → 번개처럼 빠름
• 동기 읽기/쓰기(get에 await 불필요)
• 내장 암호화 지원
• 멀티 프로세스 모드(앱 그룹/확장에 안전)
• 작은 용량, Expo와 호환
• 활발히 유지보수되며 대형 앱에서도 프로덕션 사용

요약하면: MMKV는 2025년에 있어야 할 AsyncStorage의 모습입니다.

Zustand + Persistence = 마법

Zustand는 현재 React Native에서 가장 인기 있는 가벼운 상태 관리 라이브러리입니다. persist 미들웨어를 사용하면 상태 저장이 아주 간단해지지만— 좋은 스토리지 백엔드가 있어야 합니다.

여기서 대부분의 사용자가 마주치는 문제는: MMKV를 직접 연결하면 코드가 장황하고 오류가 발생하기 쉬우며, 인스턴스 공유나 암호화를 깔끔하게 처리하지 못한다는 점입니다.

소개합니다 zustand-mmkv-storage

저는 바로 이 문제를 해결하기 위해 zustand-mmkv-storage 를 만들었습니다.

MMKV를 Zustand의 persist 미들웨어에 최소한의 보일러플레이트만으로 연결해 주는 작은 래퍼입니다:

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { mmkvStorage } from 'zustand-mmkv-storage';

export const useBearStore = create(
  persist(
    (set) => ({
      bears: 0,
      addBear: () => set((state) => ({ bears: state.bears + 1 })),
    }),
    {
      name: 'bear-storage', // MMKV 안의 키
      storage: createJSONStorage(() => mmkvStorage),
    }
  )
);

이제 bears 카운트가 앱 재시작 후에도 빠르고 안정적으로 유지됩니다.

고급: 암호화 및 격리된 스토리지

import { createMMKVStorage } from 'zustand-mmkv-storage';

const secureStorage = createMMKVStorage({
  id: 'secure-vault',               // 별도 파일
  encryptionKey: 'my-secret-2025', // 암호화 활성화
});

export const useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => secureStorage),
    }
  )
);

이제 인증 토큰이 디스크에 암호화되어 저장되고, 다른 데이터와 완전히 격리됩니다.

활용 사례

• 인증 토큰 및 리프레시 토큰
• 사용자 설정(테마, 언어)
• 장바구니 / 오프라인 폼
• 온보딩 완료 여부
• 기능 플래그 / A‑B 테스트

오늘 바로 사용해 보세요!

npm i zustand-mmkv-storage

GitHub • NPM

이 라이브러리가 시간을 절약하거나 앱을 더 빠르게 만든다면 GitHub에 ⭐️ 하나 부탁드립니다!

읽어 주셔서 감사합니다 — 빠르고 지속적인 상태 관리 즐기세요! 🐻✨