[FN] 게시판 개발 일지[3] / image-picker

이전 글에서 AWS S3 관련 설정을 다했으니 이제는 게시글에 사진을 등록하고 불러오고 등 구현해보자
과정은 사용자가 게시글을 작성할 때 사진을 등록 -> 게시글 작성 -> 사진은 AWS S3에 업로드 -> 업로드 된 사진의 url을 firebase database에 저장 -> 게시판에서 게시글 목록을 불러올때 표지에 이미지 불러오기

[FN] AWS S3, AWS IAM

 

1. image picker 라이브러리 설치

사용자의 앨범에서 사진을 선택하기 위해 아래 명령어를 통해  image-picker를 설치한다.

npm install --save react-native-image-picker

 
그리고 React Native에서 AWS S3로 데이터를 전송하거나 파일을 업로드하기 위해 아래 라이브러리도 설치한다.

npm install @aws-sdk/client-s3

 
ImageUploader.tsx
사용자가 앨범에서 이미지를 선택하고 업로드하는 기능을 구현하는 ImageUploader 컴포넌트를 따로 생성하였다.
ImageUploader 컴포넌트에는 이미지를 선택, 수정, 삭제하는 기능을 구현하였다.

 

• 사용자가 앨범에서 이미지를 선택하면 setSelectedImage에 이미지 uri(경로)을 저장
• launchImageLibrary를 사용해서 사용자 갤러리에 접근 / mediaType: 'photo'로 이미지 파일만 선택할 수 있도록 설정
• if 이미지가 선택되었다면 이미지의 URI를 가져와서 selectedImageUri에 저장 - 부모 컴포넌트에 전달

import { launchImageLibrary } from 'react-native-image-picker';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { S3_BUCKET, REGION, AWS_ACCESS, AWS_SECRET } from '@env';

const ImageUploader: React.FC<ImageUploaderProps> = ({ onImageSelect }) => {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  const selectImage = async () => {
    const result = await launchImageLibrary({ mediaType: 'photo' });

    if (result.assets && result.assets.length > 0) {
      const selectedImageUri = result.assets[0].uri;

      if (!selectedImageUri) {
        Alert.alert('이미지 선택에 실패했습니다.');
        return;
      }

      setSelectedImage(selectedImageUri);
      onImageSelect(selectedImageUri); 
    } else {
      Alert.alert('이미지를 선택하지 않았습니다.');
    }
  };

 

• removeImage : 이미지에 x표시를 클릭했을 때 실행되는 함수로 선택된 이미지를 삭제함 
• onImageSelect(null)로 부모 컴포넌트에게도 null 값 전

const removeImage = () => {
    setSelectedImage(null);
    onImageSelect(null); 
  };

 

 

이미지를 사용자의 앨범에서 선택하도록 하고, 선택된 이미지는 사진 선택 버튼 오른쪽에 나타나도록 구현.
이미지를 잘못 선택하였을 경우 삭제할 수 있도록 x 버튼을 선택된 이미지 오른쪽 상단에 배치하여 x 버튼 클릭했을 때 이미지는 삭제됨

      <TouchableOpacity onPress={selectImage} style={styles.imagePickerBox}>
        <Image source={require('../../images/camera_icon.png')} style={styles.cameraIcon} />
      </TouchableOpacity>

      
      {selectedImage && (
        <View style={styles.selectedImageContainer}>
          <Image source={{ uri: selectedImage }} style={styles.selectedImage} />
          
          <TouchableOpacity onPress={removeImage} style={styles.removeButton}>
            <Image source={require('../../images/x_icon.png')} style={styles.removeIcon} />
          </TouchableOpacity>
        </View>
      )}

 
 나는 안드로이드 스튜디오 에뮬레이터로 개발을 진행하고 있으므로 테스트를 위해 에뮬레이터 앨범에 이미지를 추가하여 그 이미지로 게시글을 작성해 볼 것이다. 안드로이드 스튜디오에서 터미널을 키고 아래 명령어를 입력한다.

adb -s <에뮬레이터 이름> push <로컬 파일 경로> /sdcard/Pictures/

 
 

구현 화면

 
카메라 버튼 클릭 시 정상적으로 앨범으로 이동함 에뮬레이터 앨범에는 테스트 사진이 저장되어 있고, 이미지 선택 시 카메라 버튼 오른쪽에 선택된 이미지 출력, 이미지 오른쪽 상단에 x 버튼 클릭 시 이미지 삭제
 
다음 게시글에는 이미지를 등록하고 게시글을 작성 완료하면 이미지가 AWS S3에 업로드되도록 구현해 보겠음