[React Native] 이미지 업로드 하기 - 갤러리, 사진첩 이미지

리액트 네이티브로 앱을 구현할 때, 스마트폰에 있는 이미지를 업로드하는 기능이 필요한 경우 사용할 수 있는 launchImageLibrary에 대해 알아보겠습니다. (안드로이드 기준)

---

# 먼저 launchImageLibrary를 사용하기 위해 라이브러리를 설정합니다.

import {launchImageLibrary} from 'react-native-image-picker';

---

# 이미지를 불러오기 위한 버튼을 만들어 주고

<SafeAreaView style={{backgroundColor: '#FFFFFF'}}>
    <ScrollView>
        <View>
          <Image
            source={
              response ? {uri: response.assets[0].uri} : 0
            }
            style={styles.img}
          />

          <TouchableOpacity
              style={{ 
                backgroundColor: '#4287f5',
                padding: 12,
                borderRadius: 8,
                marginTop: 20,
                marginLeft: 60,
                marginRight: 60,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              onPress={()=>onSelectImage()}
          >
              <Text style={{ color: 'white', fontSize: 18}}>이미지 추가하기</Text>
          </TouchableOpacity>
      </View>
  </ScrollView>
</SafeAreaView>

const styles = StyleSheet.create({
  img: {
      height: 120,
      width: 120,
      marginTop: 20,
      marginBottom: 20,
      alignSelf: 'center',
  },
});

---

# 이미지를 불러오는 함수 입니다.

• includeBase64: true 설정은 이미지를 base64로 인코딩하여 받을 수 있습니다.
• response.didCancel : 사용자가 이미지 불러오기를 취소했을때 true를 반환합니다.
• response.errorCode : 이미지를 불러오는 과정에서 오류가 발생한 경우 오류코드를 반환합니다.

const [response, setResponse] = useState("");
const [imageFile, setImageFile] = useState("");

// 이미지 가져오기
const onSelectImage = () => {
    launchImageLibrary(
      {
        madiaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: true
      }, 
      (response) => {
        console.log(response)
        // console.log(response.assets[0].base64)
        if(response.didCancel){
          return;
        }else if(response.errorCode){
          console.log("Image Error : " + response.errorCode);
        }
        
        setResponse(response);
        setImageFile(response.assets[0].base64);
     })

   }

---

response.assets[0].base64를 console로 찍어보면 파일의 size, width, height, type, uri등의 정보를 확인할 수 있고,

인코딩된 base64를 서버에서 변환하여 서버에 저장하는 방식으로 사용할 수 있습니다.