[React Native] Expo Camera 사용하기

현재 진행중인 프로젝트에서 카메라에 접근하여 사진을 찍을 수 있도록 기능을 구현해야만 했다.

1. Expo Camera 설치

npx expo install expo-camera

다음과 같은 명령어를 통해 설치한다.

› Installing 1 SDK 53.0.0 compatible native module using npm
> npm install

up to date, audited 1004 packages in 973ms

187 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

이런 결과가 터미널 창에 뜬다면 제대로 설치가 된 것이다.

2. expo-camera 관련 hook 임포트

import {CameraView, useCameraPermissions} from "expo-camera";

3. 사용자에게 카메라 권한 부여받기

const [permission, requestPermission] = userCameraPermissions();


const checkPermissions = async () => {
    if (!permission) return;

    if (permission.status !== "granted") {
      if (!permission.canAskAgain) {
        Alert.alert(
          "권한 필요",
          "앱 설정에서 카메라 권한을 변경해주세요.",
          [
            { text: "취소", style: "cancel" },
            {
              text: "설정 열기",
              onPress: () => Linking.openSettings(),
            },
          ],
          { cancelable: false }
        );
      } else {
        requestPermission();
      }
    }
  };

  useEffect(() => {
    checkPermissions();
  }, [permission]);
  
  if (!permission || permission.status !== "granted") {
    return (
      <View style={styles.permissionContainer}>
        <Text style={{ fontSize: 16 }}>카메라 권한이 필요합니다.</Text>
        <TouchableOpacity onPress={requestPermission} style={styles.permissionButton}>
          <Text style={styles.permissionButtonText}>권한 요청</Text>
        </TouchableOpacity>
      </View>
    );
  }

4. 카메라 View 작성

<CameraView
        style={styles.camera}
        facing={facing}
        ref={cameraRef}
        zoom={zoom}
        animateShutter={true}
        flash={flash}
      />

결과

다음과 같이 카메라 접근이 잘 이뤄짐을 확인할 수 있다.