0Pricing
React Native Academy · 강의

권한을 적절하게 처리하기

권한을 요청하기 전에 상태를 확인하고 사용자에게 상황에 맞는 설명을 보여 주며 권한이 거부되었을 때 기능을 자연스럽게 제한합니다.

권한을 적절하게 처리하기은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Why Permission Handling Matters

iOS and Android require explicit user consent before an app can access sensitive capabilities like the camera, location, microphone, or contacts. How you ask for and respond to permission decisions significantly affects user trust and app ratings. A poorly timed or unexplained permission request often results in denial, and once denied, the only recovery path is the device's Settings app.

Permission Lifecycle: The Four States

A permission can be in one of four states: undetermined (never asked yet), granted (user allowed it), denied (user said no during the last prompt), and restricted (iOS — blocked by parental controls, cannot be changed). Your app must handle each state correctly and never assume a permission is granted without checking.

import { PermissionStatus } from 'expo-location';

const { status } = await Location.getForegroundPermissionsAsync();

switch (status) {
  case PermissionStatus.UNDETERMINED:
    // Safe to call requestForegroundPermissionsAsync()
    break;
  case PermissionStatus.GRANTED:
    // Proceed with the feature
    break;
  case PermissionStatus.DENIED:
    // Show instructions to open Settings
    break;
}

Check Before Requesting

Always check the current permission status with a get*Async call before calling request*Async. If the permission is already granted, skip the request dialog. If it was already denied, do not re-prompt — iOS will silently ignore the request and Android will briefly flash a snackbar. Only prompt when status is undetermined.

async function ensureCameraPermission(): Promise<boolean> {
  const { status } = await Camera.getCameraPermissionsAsync();

  if (status === 'granted') return true;

  if (status === 'undetermined') {
    const { status: newStatus } = await Camera.requestCameraPermissionsAsync();
    return newStatus === 'granted';
  }

  // status === 'denied' — direct user to Settings
  return false;
}

Contextual Pre-Permission Rationale

Before triggering the OS permission dialog, show the user a custom rationale screen that explains in plain language why your app needs the permission and how it benefits them. This 'prime' screen dramatically increases grant rates. It should appear right before the system dialog, not during onboarding before any feature context is established.

function LocationRationale({ onConfirm }: { onConfirm: () => void }) {
  return (
    <View style={styles.rationale}>
      <Ionicons name='location-outline' size={48} color='#6200ee' />
      <Text style={styles.title}>Share your location</Text>
      <Text style={styles.body}>
        We use your location to show nearby restaurants and
        calculate accurate delivery times.
      </Text>
      <Button title='Allow Location' onPress={onConfirm} />
      <Button title='Not Now' onPress={() => {}} color='gray' />
    </View>
  );
}

Linking to App Settings When Denied

When a user has denied a permission and the feature cannot work without it, guide them to the device Settings app to manually grant it. Use Linking.openSettings() from React Native to open the app's settings page directly. Explain in an alert what they need to enable before calling openSettings.

import { Linking, Alert } from 'react-native';

function showSettingsPrompt(feature: string) {
  Alert.alert(
    feature + ' Access Denied',
    'Please enable ' + feature + ' access in your device Settings to use this feature.',
    [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Open Settings', onPress: () => Linking.openSettings() },
    ]
  );
}

Graceful Degradation

Graceful degradation means your app still works — with reduced functionality — when a permission is denied. For example, a food delivery app denied location access can show a manual address input instead of auto-detecting the address. Design every permission-gated feature with a fallback path so no user is completely blocked from the app's core value.

export default function LocationPicker() {
  const [permission] = Location.useForegroundPermissions();
  const granted = permission?.granted;

  if (granted) {
    return <MapWithAutoLocation />; // use GPS
  }

  return <ManualAddressInput />;   // fallback — type address manually
}

canAskAgain: One Chance to Re-Request

The permission result object includes a canAskAgain property. On iOS, once the user taps 'Don't Allow' on the system dialog, canAskAgain becomes false and the system will never show the dialog again for that permission. On Android, it becomes false after the user denies twice. Always check this flag to decide whether to show the re-prompt button or the Settings link.

const { status, canAskAgain } = await Camera.requestCameraPermissionsAsync();

if (status !== 'granted') {
  if (canAskAgain) {
    // Show in-app explanation and re-request button
    setShowRationale(true);
  } else {
    // Show link to Settings — OS won't show dialog again
    showSettingsPrompt('Camera');
  }
}

Handling Multiple Permissions

Some features require multiple permissions simultaneously — for example a media picker needs both camera and media library access. Request them in sequence, checking each result before requesting the next. If any permission is denied, handle it and stop — do not proceed to the next request so users are not overwhelmed by multiple system dialogs in rapid succession.

async function requestMediaFeaturePermissions() {
  const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
  if (cameraStatus !== 'granted') {
    showSettingsPrompt('Camera');
    return false;
  }
  const { status: mediaStatus } = await MediaLibrary.requestPermissionsAsync();
  if (mediaStatus !== 'granted') {
    showSettingsPrompt('Media Library');
    return false;
  }
  return true;
}

Persisting Permission State

You do not need to persist permission state in AsyncStorage — always query it fresh with get*Async calls because the user can change permissions in device Settings between app sessions. However, you can persist a flag like hasSeenPermissionRationale in AsyncStorage so you only show your custom rationale screen once and do not re-show it on every app launch.

async function maybeShowRationale() {
  const seen = await AsyncStorage.getItem('seenLocationRationale');
  if (!seen) {
    setShowRationale(true);
    await AsyncStorage.setItem('seenLocationRationale', 'true');
  } else {
    // Rationale seen before — go straight to checking permission
    await checkLocationPermission();
  }
}

Testing Permission Flows

Test all four permission states: first launch (undetermined), granted, denied, and denied with canAskAgain=false. On iOS Simulator, reset permissions via Device Settings app. On Android Emulator, use App Info to revoke permissions manually. Also test the Settings link — make sure it opens the correct per-app settings page, not the general device settings screen.

A Reusable Permission Hook

Encapsulate the full permission lifecycle — check, rationale, request, and Settings fallback — into a reusable custom hook. The hook returns the current status and a function to trigger the permission request. This eliminates duplicated permission handling code across multiple screens that need the same capability.

function useCameraPermission() {
  const [status, setStatus] = React.useState<string>('undetermined');

  async function request() {
    const { status: s, canAskAgain } = await Camera.requestCameraPermissionsAsync();
    setStatus(s);
    if (s !== 'granted' && !canAskAgain) {
      showSettingsPrompt('Camera');
    }
  }

  useEffect(() => {
    Camera.getCameraPermissionsAsync().then(({ status: s }) => setStatus(s));
  }, []);

  return { status, granted: status === 'granted', request };
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: checking permission status before requesting prevents redundant system dialogs and handles already-denied states correctly, canAskAgain determines whether to re-prompt or direct users to Settings, and graceful degradation provides a fallback path so denied permissions don't completely block users from your app. Next up we explore forms and validation with react-hook-form.

자주 묻는 질문

“권한을 적절하게 처리하기” 강의는 무료인가요?

네 — “권한을 적절하게 처리하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“권한을 적절하게 처리하기”에서 뭘 배우나요?

권한을 요청하기 전에 상태를 확인하고 사용자에게 상황에 맞는 설명을 보여 주며 권한이 거부되었을 때 기능을 자연스럽게 제한합니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“권한을 적절하게 처리하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. expo-camera로 카메라 접근하기
  2. expo-location으로 GPS 위치 읽기
  3. 로컬 알림 예약하기
  4. 권한을 적절하게 처리하기
← React Native Academy(으)로 돌아가기