본문 바로가기

Web_Study/PlayList_ReactNative

2. Expo_MediaLibrary

▶ Expo Media Library

  • Expo Media Library는 기본적으로 디바이스에서 사용 가능한 미디어 파일을 검색하고 관리하는 방법을 제공함.
  • Expo Media Library를 사용하면 사용자의 사진첩에서 사진을 선택하고 업로드하거나, 앱에서 촬영한 사진 및 동영상을 저장할 수 있음. 또한 이미지 및 비디오를 조작하고 필터링하거나 사진을 자르거나 회전하는 등의 작업을 수행 할 수 있습니다.

 getPermission 함수

import * as MediaLibrary from 'expo-media-library';

async function requestMediaLibraryPermission() {
  const { status } = await MediaLibrary.getPermissionsAsync();

  if (status !== 'granted') {
    const { status } = await MediaLibrary.requestPermissionsAsync();

    if (status !== 'granted') {
      alert('권한을 허용하지 않으면 앱에서 미디어에 접근할 수 없습니다!');
    }
  }
}
  • 앱에서 미디어에 대한 권한을 요청할 수 있음.
  • 해당 함수는 Promise를 반환하며, 사용자가 권한 부여를 허용하거나 거부할때까지 대기함.
  • 권한이 부여되면 반환된 Promise는 resolve됨. 그렇지 않으면 reject됨.
    • Promise는 비동기 작업을 처리하는 객체
    • Promise는 비동기 작업을 시작하고, 작업이 완료되면 결과를 반환함.
  • getPermissionAsync()함수
    • 현재 권한 상태를 확인하는 함수.
    • Promise를 반환하며, 현재 권한 상태를 반환하는 'status'속성을 포함하는 객체를 resolve함.
    • 권한이 부여되지 않은 경우 requestPermissionAsync함수를 사용하여 권한을 요청함.
    • 권한이 부여되지 않은 경우, 사용자에게 알림이 표시됨.

 

Async & Await

  • async awiat는 자바스크립트에서 비동기 코드를 작성하는 데 사용되는 키워드
  • JavaScript에서 함수는 기본적으로 동기적으로 실행되어짐. 즉, 함수가 호출되면 실행이 완료될 때까지 다음 코드로 진행되지 않음. 이러한 방식으로 동작하는 함수를 '동기함수'라고 표현함.
  • 하지만, 때로는 함수가 완료되기를 기다리는 대신에, 다른 작업이 수행되어야 할 때가 있음. 예를 들어, 서버에서 데이터를 가져오는 것은 일반적으로 시간이 많이 걸리는 작업임. 이때, 자바스크립트에서 비동기 함수를 사용하여 코드 실행을 일시 중지하고 다른 작업을 수행할 수 있음.
  • async, await는 이때 사용되는 두가지 키워드임
  • async는 함수가 비동기 함수임을 의미하고, await는 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하는데 사용함.

 

Alert 함수

  • alert는 사용자에게 간단한 메시지를 표현하는데 사용됨.
  • JavaScript의 'window.alert()'와 비슷하게 동작함.
alert('메시지 내용');
  • 'alert'를 사용하면 사용자가 확인버튼을 클릭하기 전까지 다른 작업을 수행할 수 없음. 주의해야함
  • React Native에서는 'Alert'컴포넌트를 사용하여 더 많은 제어를 할 수 있음.
import { Alert } from 'react-native';

Alert.alert(
  '제목',
  '메시지 내용',
  [
    { text: '버튼 1', onPress: () => console.log('버튼 1 클릭됨') },
    { text: '버튼 2', onPress: () => console.log('버튼 2 클릭됨') },
  ],
);

 

 

'Web_Study > PlayList_ReactNative' 카테고리의 다른 글

1. ReactNavigation  (0) 2023.04.21