8.5.1 이미지 선택 기능 구현하기

우선 업로드할 이미지를 선택해야겠지요? 이때 필요한 라이브러리가 react-native-image-picker입니다. 이 라이브러리를 사용하면 사진첩에서 이미지를 선택하거나 카메라로 사진을 촬영할 수 있습니다.

유사한 라이브러리로 @react-native-community/cameraroll이 있습니다. 이 라이브러리는 이미지를 선택하는 네이티브 UI를 보여주는 것이 아니라 이미지를 선택하는 UI를 react-native로 직접 만들 수 있도록 갤러리의 이미지를 불러오거나 갤러리에 이미지를 저장할 때 사용합니다.

react-native-image-picker 라이브러리를 설치해보세요.

$ yarn add react-native-image-picker
$ npx pod-install

iOS에서 이 라이브러리를 사용하려면 Info.plist 파일을 수정해줘야 합니다. ios/Info.plist 파일을 열고, <dict> 태그 사이의 최하단에 다음 코드를 입력하세요. 이 작업은 카메라 및 갤러리 사용 권한을 위해 필요합니다.

ios/PublicGallery<닉네임>/Info.plist

(...)
  <key>NSPhotoLibraryUsageDescription</key>
  <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to use your camera</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
</dict>
</plist>