[React-Native] react-native-mmkv 사용해 앱 로컬 저장소 성능 개선하기

 

모바일 앱을 개발하다 보면 로컬 저장소에 데이터를 저장할 경우가 생깁니다. react-native에서는 자연스럽게 AsyncStorage라는 라이브러리를 사용해 왔습니다. 하지만 최근에 WeChat에서 개발한 react-native-mmkv라는 라이브러리를 알게되어 소개합니다.

 

1. 속도

mmkv 는 모든것이 C++로 작성이 되어서 기존에 있던 다른 로컬저장소보다 속도가 빠릅니다.

 

2. 보안

지금까지 많이 사용하던 AsyncStorage는 암호화를 지원하지 않지만 mmkv는 암호화를 지원합니다.

 

3. 동기식 호출

비동기처리가 완료될때까지 기다리는게 아니라 동기식으로 데이터를 받아올 수 있습니다.

 

설치

yarn add react-native-mmkv
cd ios && pod install

 

인스턴스 생성

import { MMKV } from 'react-native-mmkv'

export const storage = new MMKV()

 

데이터 저장

storage.set('user.name', 'Marc')
storage.set('user.age', 21)
storage.set('is-mmkv-fast-asf', true)

 

데이터 가져오기

const username = storage.getString('user.name') // 'Marc'
const age = storage.getNumber('user.age') // 21
const isMmkvFastAsf = storage.getBoolean('is-mmkv-fast-asf') // true

 

데이터 암호화

// encrypt all data with a private key
storage.recrypt('hunter2')

// remove encryption
storage.recrypt(undefined)

 

벤치마크 결과

Reading a value from Storage 1000 times. Measured in milliseconds on an iPhone 11 Pro, lower is better

출처: https://github.com/mrousavy/StorageBenchmark

 

결론

react-native-mmkv는 기존에 사용하던 AsyncStorage 보다 속도, 보안, 유저 편의성 등 모든 면에서 뛰어난 라이브러리인 것 같아 굳이 사용 안 할 이유가 없어 보입니다. 사실 이 정도의 퍼포먼스를 보인다면 로컬 데이터 저장이 많이 필요하지 않은 간단한 앱에서는 redux의 사용 없이 react-query + mmkv 조합으로 앱을 만들어도 될 것 같다는 생각이 들었습니다.