๐Ÿ” 44. React Native์—์„œ ์‚ฌ์šฉ์ž ์ •๋ณด ์•ˆ์ „ํ•˜๊ฒŒ ์ €์žฅํ•˜๊ธฐ โ€” AsyncStorage, SecureStore, Keychain ๋น„๊ต

JM_Devยท2025๋…„ 5์›” 28์ผ
post-thumbnail

์•ฑ์„ ๋งŒ๋“ค๋‹ค ๋ณด๋ฉด ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ผ์ด ๋งŽ์•„์ง„๋‹ค.

  • ๋กœ๊ทธ์ธ ํ† ํฐ
  • ์ž๋™ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€
  • ํ…Œ๋งˆ ์„ค์ •
  • ์ตœ๊ทผ ๋ณธ ํ•ญ๋ชฉ

์ด๋Ÿฐ ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์€
React Native์—์„œ ์–ด๋–ค ์ €์žฅ์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋А๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๋‹ค.

์ด๋ฒˆ ๊ธ€์—์„œ๋Š”
React Native์—์„œ ์ž์ฃผ ์“ฐ์ด๋Š” ์ €์žฅ ๋ฐฉ์‹ ์„ธ ๊ฐ€์ง€๋ฅผ ๋น„๊ตํ•ด๋ณธ๋‹ค.


โœ… 1. AsyncStorage

npm install @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';

await AsyncStorage.setItem('theme', 'dark');
const theme = await AsyncStorage.getItem('theme');
  • ๋น„๋™๊ธฐ ํ‚ค-๊ฐ’ ์ €์žฅ ๋ฐฉ์‹
  • ๋ฌธ์ž์—ด๋งŒ ์ €์žฅ ๊ฐ€๋Šฅ (JSON.stringify ํ•„์š”)
  • localStorage์™€ ์œ ์‚ฌ

๐Ÿ“ฆ ์ €์žฅ ์œ„์น˜: ๋‚ด๋ถ€ ๋””์Šคํฌ (iOS/Android ๋กœ์ปฌ ์˜์—ญ)
๐Ÿ”“ ๋ณด์•ˆ: ๊ธฐ๋ณธ์ ์œผ๋กœ ์•”ํ˜ธํ™”๋˜์ง€ ์•Š์Œ

โœ… ์•ฑ ์„ค์ •, ๊ฐ„๋‹จํ•œ ์บ์‹œ, ๋น„๋กœ๊ทธ์ธ ์œ ์ € ์ƒํƒœ
โŒ ๋กœ๊ทธ์ธ ํ† ํฐ ์ €์žฅ์€ ๋น„์ถ”์ฒœ


๐Ÿ”’ 2. Expo SecureStore

npx expo install expo-secure-store
import * as SecureStore from 'expo-secure-store';

await SecureStore.setItemAsync('token', 'abc123');
const token = await SecureStore.getItemAsync('token');
  • iOS: Keychain
  • Android: EncryptedSharedPreferences (or Keystore)
  • ์ž๋™ ์•”ํ˜ธํ™”, ์ƒ์ฒด ์ธ์ฆ ์—ฐ๋™ ๊ฐ€๋Šฅ

๐Ÿ“ฆ ์ €์žฅ ์œ„์น˜: OS๋ณ„ ๋ณด์•ˆ ์ €์žฅ์†Œ
๐Ÿ” ๋ณด์•ˆ: ๋งค์šฐ ์•ˆ์ „ (๊ถŒํ•œ์ด ์—†๋Š” ์•ฑ์€ ์ ‘๊ทผ ๋ถˆ๊ฐ€)

โœ… ๋กœ๊ทธ์ธ ํ† ํฐ, ๋ฏผ๊ฐ ์ •๋ณด ์ €์žฅ
โŒ ์šฉ๋Ÿ‰ ์ œํ•œ ์กด์žฌ (์ž‘์€ ํ‚ค-๊ฐ’ ์ €์žฅ์— ์ ํ•ฉ)


๐Ÿ—๏ธ 3. react-native-keychain

npm install react-native-keychain
import * as Keychain from 'react-native-keychain';

await Keychain.setGenericPassword('user', 'secureToken');
const credentials = await Keychain.getGenericPassword();
  • iOS Keychain / Android Keystore ์ง์ ‘ ์—ฐ๋™
  • ์ƒ์ฒด์ธ์ฆ(Biometrics) ์˜ต์…˜ ์ง€์›
  • ์ž๋™ ๋กœ๊ทธ์ธ ๊ตฌํ˜„์— ์ตœ์ 

โœ… ๋กœ๊ทธ์ธ ์ •๋ณด, ์ƒ์ฒด ์ธ์ฆ ๊ธฐ๋ฐ˜ ์ž๋™ ๋กœ๊ทธ์ธ
โŒ ์„ค์ • ๋ณต์žก, Expo Go์—์„œ๋Š” ๋ฏธ์ง€์› (EAS ๋นŒ๋“œ ํ•„์š”)


โš–๏ธ ์ €์žฅ ๋ฐฉ์‹ ๋น„๊ตํ‘œ

ํ•ญ๋ชฉAsyncStorageSecureStoreKeychain
๋ณด์•ˆ ์ˆ˜์ค€๋‚ฎ์Œ๋†’์Œ๋งค์šฐ ๋†’์Œ
์šฉ๋Ÿ‰ ์ œํ•œ์—†์Œ์žˆ์Œ (์ž‘์€ ๋ฐ์ดํ„ฐ ์ ํ•ฉ)์žˆ์Œ
๋ฌธ์ž์—ด ์™ธ ๋ฐ์ดํ„ฐX (์ง์ ‘ ๋ณ€ํ™˜ ํ•„์š”)OO
์ƒ์ฒด ์ธ์ฆX์กฐ๊ฑด๋ถ€โœ… ์ง€์›
Expo ์ง€์›โœ…โœ…โŒ (EAS ๋นŒ๋“œ ํ•„์š”)

๐Ÿง  ์–ธ์ œ ์–ด๋–ค ๊ฑธ ์จ์•ผ ํ• ๊นŒ?

์ƒํ™ฉ์ถ”์ฒœ ์ €์žฅ ๋ฐฉ์‹
๋‹คํฌ๋ชจ๋“œ, ์–ธ์–ด ์„ค์ • ๋“ฑAsyncStorage
๋กœ๊ทธ์ธ ํ† ํฐ, refresh tokenSecureStore or Keychain
์ž๋™ ๋กœ๊ทธ์ธ + Face IDKeychain
๋น„ํšŒ์› ์ƒํƒœ ์œ ์ง€AsyncStorage
์„ค์ • ๊ฐ’ + ๋ฏผ๊ฐ ์ •๋ณด ๊ตฌ๋ถ„๋‘˜์„ ๋ณ‘ํ–‰ ์‚ฌ์šฉ ๊ฐ€๋Šฅ (๊ตฌ์กฐ ์„ค๊ณ„ ์ค‘์š”)

๐Ÿ“ ๋‚ด๊ฐ€ ๋А๋‚€ ์ 

์ฒ˜์Œ์—๋Š” ๋ชจ๋“  ๊ฑธ AsyncStorage์— ๋„ฃ์—ˆ๋Š”๋ฐ,
๋กœ๊ทธ์ธ ํ† ํฐ์ด ํƒˆ์ทจ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๋‚˜์ค‘์— ์•Œ๊ฒŒ ๋๋‹ค.

๊ทธ ํ›„ SecureStore๋กœ ๋ฏผ๊ฐ ์ •๋ณด๋Š” ๋”ฐ๋กœ ๋ถ„๋ฆฌํ•ด์„œ ์ €์žฅํ•˜๊ณ ,
์„ค์ • ๊ฐ’์€ AsyncStorage์— ์ €์žฅํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌ์กฐ๋ฅผ ์žก๊ณ  ์žˆ๋‹ค.

์ง€๊ธˆ์€ ๋กœ๊ทธ์ธ ์ƒํƒœ๋ฅผ Keychain + Zustand๋กœ ์ฒ˜๋ฆฌํ•ด์„œ
์•ฑ์„ ๊ป๋‹ค ์ผœ๋„ ์ž๋™ ๋กœ๊ทธ์ธ์ด ์ž˜ ๋˜๋„๋ก ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ๋‹ค.


๐Ÿ” โ€œ์•ฑ์˜ ์‹ ๋ขฐ๋Š” UX๋กœ ์‹œ์ž‘ํ•ด์„œ, ๋ณด์•ˆ์œผ๋กœ ์™„์„ฑ๋œ๋‹ค.โ€


๐Ÿท๏ธ ์ถ”์ฒœ ํƒœ๊ทธ

profile
๊ฐœ๋ฐœ์ž๋กœ ์ทจ์—…์„ ์ค€๋น„ ์ค‘ ์ด๋ฉฐ, ์—ด์‹ฌํžˆ ๊ณต๋ถ€ ์ค‘ ์ž…๋‹ˆ๋‹ค!

0๊ฐœ์˜ ๋Œ“๊ธ€