React Native Permissions권한 관리

 

React Native Permissions란?

모바일 앱은 카메라, 사진첩, 위치, 알림 같은 민감한 기능에 접근할 때 반드시 사용자에게 권한을 요청해야 합니다. 그런데 플랫폼별로 권한 요청 방식이 다릅니다.

플랫폼권한 요청 방식특징

iOS	Info.plist에 이유 문구 표시 + 시스템 팝업 자동 실행	“왜 필요해?” 라고 물어보는 걸 매우 중요하게 생각함
Android	AndroidManifest.xml 등록 + 실행 중 요청	버전별로 권한 종류가 다르게 존재함 😵

React Native는 기본적으로 이런 권한 관리에 대한 통합된 인터페이스를 제공하지 않습니다.
그래서 직접 네이티브 코드를 다루기엔 부담스럽죠.

여기서 등장하는 게

react-native-permissions 입니다.

이 라이브러리는:

• iOS & Android 권한 요청 방식을 하나의 API로 통합해주고
• 권한 상태를 여러 단계로 표현해주며
• 권한 흐름 제어(확인 → 요청 → 차단 처리)를 쉽게 해줍니다.

---

문제 : 네이티브 권한 다이얼로그 로직을 구현했으나, UI에서 조회 불가함 

react-native-permissions는 다음과 같은 상태를 반환합니다:

 

GRANTED	허용됨
DENIED	거부됨 (다시 요청 가능)
BLOCKED	차단됨 (설정 앱에서만 변경 가능)
UNAVAILABLE	사용 불가 (기기/환경 문제)
LIMITED	일부 접근만 가능 (iOS 14+)

 

초기 코드에서는 이것을 무시하고 단순 boolean으로 관리했습니다:

// ❌ 문제 코드
const handlePermissionRequest = async () => {
  await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
  setIsGranted(true); // 항상 true로 업데이트…
};

이게 모든 문제의 핵심 원인이었습니다.

---

해결: 상태를 “명시적으로” 관리한다

권한 확인 함수

const checkPermission = async () => {
  const status = await check(PERMISSIONS.IOS.PHOTO_LIBRARY);
  return status === RESULTS.GRANTED || status === RESULTS.LIMITED;
};

권한 요청 흐름

const requestPermission = async () => {
  const status = await check(PERMISSIONS.IOS.PHOTO_LIBRARY);

  switch (status) {
    case RESULTS.GRANTED:
    case RESULTS.LIMITED:
      return true;

    case RESULTS.DENIED:
      return (await request(PERMISSIONS.IOS.PHOTO_LIBRARY)) !== RESULTS.DENIED;

    case RESULTS.BLOCKED:
      Alert.alert('권한이 차단되었습니다.', '설정에서 권한을 허용해주세요.', [
        { text: '취소', style: 'cancel' },
        { text: '설정', onPress: () => Linking.openSettings() },
      ]);
      return false;

    default:
      return false;
  }
};

설정 앱에서 돌아왔을 때 자동으로 재확인

useEffect(() => {
  checkPermission();
  const sub = AppState.addEventListener('change', (s) => {
    if (s === 'active') checkPermission();
  });
  return () => sub.remove();
}, []);

---

Console.log 가 최선이였을까?  Reactotron / Flipper는 도움이 될까?

• Reactotron: State 자동 추적 불가 → 로그로만 확인
• Flipper: 네이티브 레벨 디버깅 가능하지만, check(), request() 반환값은 자동 추적 불가 → 로그로만 확인
• 결국 console.log로 확인하거나, 명시적으로 state에 저장해야 합니다.

항목	console.log	Reactotron	Flipper
장점	콘솔에서 직접 확인	타임라인으로 시각화	다양한 네이티브 로그와 함께 볼 수 있음
상태(State) 추적	직접 찍어보는 방식	Redux / Apollo state 자동 추적 가능	Redux DevTools 플러그인 사용 시 가능
네트워크 요청 확인	직접 찍어보는 방식	네트워크 탭에서 바로 확인 가능	네트워크 탭에서 바로 확인 가능
네이티브 모듈 반환값 추적	직접 찍어보는 방식	자동 추적 X → 명시적 log 필요	자동 추적 X → console.log 또는 state 저장해야 확인 가능
UI / Layout 디버깅	❌ 불가능	❌ 기본 제공 없음	✅ Layout inspector로 실시간 UI 구조 확인 가능
성능(PERF) 측정	❌ 불가	❌ 기본 제공 없음	✅ Perf 플러그인으로 프레임/메모리 확인 가능
언제 쓰면 좋나	빠르게 값 확인할 때	상태 변화 흐름을 보고 싶을 때	네이티브/레이아웃/성능까지 포함해 보고 싶을 때

 

---

5. 배운 점 정리 - 그래서 앞으로 디버깅에 어떤 도구를 어떻게 사용하면 좋을까요?

 

 

• console.log → “일단 지금 값 뭐냐?” 할 때
• Reactotron → “상태가 어떻게 변하고 있었지?” 타임라인 보고 싶을 때 
• Flipper → “네이티브 / UI 구조 / 성능까지 같이 확인해야 할 때”