9.6.1 재사용할 수 있는 모달 만들기

앞에서 UploadModeModal을 만들었지요? 이번에 만들 모달은 이 모달 컴포넌트와 매우 비슷한데요. UploadModeModal 컴포넌트의 코드를 복사/붙여넣기해 내부 코드만 조금 수정해줄 게 아니라, 재사용할 수 있는 컴포넌트를 만들어서 기존 UploadModeModal도 대체하고, 이를 통해 이번에 만들 모달도 구현해보겠습니다.

우선 ActionSheetModal 컴포넌트를 생성한 뒤, 기존의 UploadModeModal 컴포넌트 코드를 복사해 붙여넣으세요. 그다음에는 visible과 onClose를 제외한 Props를 제거하고, actions라는 Props를 추가하세요. whiteBox 스타일을 가진 View 내부의 JSX도 지워주세요.

components/ActionSheetModal.js

import React from 'react';
import {StyleSheet, Modal, View, Pressable, Text} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function ActionSheetModal({visible, onClose, actions}) {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}>
      <Pressable style={styles.background} onPress={onClose}>
        <View style={styles.whiteBox}>
          {/* TODO: Props로 받아온 actions 배열 사용 */}
        </View>
      </Pressable>
    </Modal>
  );
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'rgba(0,0,0,0.6)',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  whiteBox: {
    width: 300,
    backgroundColor: 'white',
    borderRadius: 4,
    elevation: 2,
  },
  actionButton: {
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    marginRight: 8,
  },
  text: {
    fontSize: 16,
  },
});

export default ActionSheetModal;