푸딩 7일차

Profile Page

1. Image Picker 추가

1-1. Modal Component 생성

• 카메라나 갤러리에서 이미지를 가져올 수 있도록 선택하는 모달창을 컴포넌트로 생성했다.
• Modal 컴포넌트에 props로 변수와 함수를 넘겨준다.
• toggleModal : Modal 활성화 여부 (boolean)
• onToggleModal : Modal 활성화 실행 함수
• onCamera : 카메라 선택 시 실행되는 함수
• onGallery : 갤리러 선택 시 실행되는 함수

ProfilePage.js

import ImageModal from '../../components/join/ImageModal.js'

function ProfilePage ({navigation}){ 
  return(
    	<ImageModal toggleModal={toggleModal} onToggleModal={handleToggleModal} 
		    onCamera={handleCamera} onGallery={handleGallery} />
    )
}

ImageModal.js

import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity, Button } from 'react-native'
import Modal from 'react-native-modal'

function ImageModal ({toggleModal, onToggleModal, onCamera, onGallery}){ 
  return (
    <Modal isVisible={toggleModal}>
      <View style={styles.content}>
        <TouchableOpacity style={styles.modalText} onPress={()=>onCamera()}>
          <Text>카메라</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.modalText} onPress={()=>onGallery()}>
          <Text>이미지 선택</Text>
        </TouchableOpacity>
        <View style={styles.modalButtonView}>
          <TouchableOpacity onPress={()=>onToggleModal()}>
            <Text style={styles.modalButtonText}>취소</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  )
}

1-2. Image Picker 실행

• 사용한 라이브러리 : Image Picker
• launchCamera는 카메라를 실행하고 사진을 찍어서 이미지를 가져오고, launchImageLibrary는 갤리리를 실행해서 이미지를 선택한다.
• 카메라나 갤러리를 선택 후 다시 뒤로가기로 선택했을 때를 if문으로 예외처리를 해주고, 이미지의 uri주소를 가져온다.
• 가져온 이미지의 uri주소는 함수에 저장해준다.
• 마지막으로 modal창의 활성화를 false로 변경한다.

ProfilePage.js

  const handleCamera = () => {
    launchCamera({
      saveToPhotos: true,
    }, response => {
      if(response.didCancel){ // didCancel: 카메라로 사진 선택 취소
        console.log(response.didCancel)
      } else {
        const uri = response.assets[0].uri
        setImageSource(uri)
        handleToggleModal()
      }
    })
  }

  const handleGallery = () => {
    launchImageLibrary({}, response => {
      if(response.didCancel){ // didCancel: 카메라로 사진 선택 취소
        console.log(response.didCancel)
      } else {
        const uri = response.assets[0].uri
        setImageSource(uri)
        handleToggleModal()
      }
    })
  }

그러면 위에 처럼 기본 이미지가 있던 자리에 카메라나 갤러리에서 사진을 잘 가져와진다!!

변수나 함수 이름 짓는게 어렵다,, 겹치지 않고 읽으면 어떤 일을 수행하는지 알기 쉽게 하려고 풀어서 쓰다보니 이름도 계속 길어진다..ㅜㅜ 그래도 계속 이름 짓다보면 더 어울리는 이름을 지어줄 수 있겠지..!