actions 객체 배열을, map을 통해 JSX 배열로 변환했습니다. 이때 주의할 점은 key 값을 설정해줘야 한다는 점입니다. 리액트에서 배열을 렌더링할 때는 고유한 값을 key Props로 지정해줘야 합니다. 자세한 내용은 이 링크를 참고하세요.

    http://bit.ly/react-reconcile

    컴포넌트를 다 작성한 뒤에는 CameraButton에서 사용한 UploadModeModal을 지우고 방금 만든 ActionSheetModal로 대체해보세요.

    components/CameraButton.js - 기존 UploadModeModal의 코드 대체

    import ActionSheetModal from './ActionSheetModal';
    
    (...)
    
     <ActionSheetModal
       visible={modalVisible}
       onClose={() => setModalVisible(false)}
       actions={[
         {
           icon: 'camera-alt',
           text: '카메라로 촬영하기',
           onPress: onLaunchCamera,
         },
         {
           icon: 'photo',
           text: '사진 선택하기',
           onPress: onLaunchImageLibrary,
         },
      ]}
    />

    안드로이드에서 화면 하단의 카메라 버튼을 눌렀을 때 이전처럼 모달이 잘 나타나는지 확인해보세요. 잘 나타난다면 이제 UploadModeModal 컴포넌트는 불필요하므로 삭제해주세요.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.