더북(TheBook)

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 컴포넌트는 불필요하므로 삭제해주세요.

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