Modal 처리

애플리케이션에서 사용할 Modal을 만들 필요가 있다. React Native에서도 Modal을 제공하기는 하지만, 해당 Modal을 이용할 경우 하나 만들어줄 때마다 계속해서 style을 정의해주고 선언해줄 필요가 있었다. 이는 코드 중복이 많이 되기 때문에, 깔끔한 코드를 만들어주지 못한다. 그래서 Custom한 Modal을 만들어 주기로 하였다.

사실 Modal 만드는 거에 있어서 자신이 있는 편은 아니었다. 저번에 해커톤에서 React로 프로젝트를 진행하는데, 자신있게 Modal을 만들겠다고 말했다가 실패했던 적이 있었기 때문이다.(옆의 23학번 신입생이 도와줘서 해결했다) 하지만, 이번에는 성공하리라..

우선 틀을 만들어준다.

interface ModalPopupProps {
  visible: boolean;
  children: React.ReactNode;
}

const ModalPopup: React.FC<ModalPopupProps> = ({ visible, children }) => {
  const [showModal, setShowModal] = useState(visible);
  const scaleValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    toggleModal();
  }, [visible]);

  const toggleModal = () => {
    if (visible) {
      setShowModal(true);
      Animated.spring(scaleValue, {
        toValue: 1,
        useNativeDriver: true,
      }).start();
    } else {
      setTimeout(() => setShowModal(false), 200);
      Animated.timing(scaleValue, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }).start();
    }
  };

  return (
    <Modal transparent visible={showModal}>
      <View style={styles.modalBackGround}>
        <Animated.View
          style={[mainPageStyleSheet.SignModalContainer, { transform: [{ scale: scaleValue }] }]}>
          {children}
        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalBackGround: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
});

export default ModalPopup;

visible과 children을 인자값으로 받아 visible의 상태에 따라 children을 전시할 수 있게끔 세팅해 놓았다. 사실 styled component를 사용하지 않으려고 했는데, 해당 파일에서만 사용하는 style이라, 전역에서 사용하는 것은 옳지 않다는 생각이 들어서 Styled Component를 사용해 주었다. 위와 같이 코드 세팅을 해주면 준비는 끝난다. 하지만, 여기서 사용하려는 코드에 바로 View를 넣으면 코드가 난잡해지기 때문에 또 파일을 분리해 주었다.

interface ModalPopupProps {
  visible: boolean;
  onClose: () => void;
}

const SignModalPopup: React.FC<ModalPopupProps> = ({ visible, onClose }) => {
  if (!visible) {
    return null;
  }
  else
  return (
    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
      <Text style={mainPageStyleSheet.emailChecktext}>
        이미 등록된 이메일이 있습니다!
      </Text>
      <TouchableOpacity style={mainPageStyleSheet.SignmodalButton} onPress={onClose}>
        <Text style={mainPageStyleSheet.SignmodalButtonText}>확인</Text>
      </TouchableOpacity>
    </View>
  );
};

export default SignModalPopup;

현재 사용하려는 모달은 회원가입을 하려고 할 때 중복된 이메일이 있을 경우 띄우는 모달이었다. 그래서 위와 같이 문구들을 설정해주고, style을 세팅하여 View를 Export 해주었다. 이제 사용해보자. 사용하는 것은 어렵지 않다.

else {
  const data = await response.json();
  setVisible(true)
  setStatusCode(data.code)
}

/////////////////////////////////
<ModalPopup visible={visible}>  
    <SignModalPopup visible={visible} onClose={() => setVisible(false)}/>
</ModalPopup>

사용하려는 페이지로 가서 ModalPopup을 세팅해준 뒤 View를 불러오면 된다. 그러고 특정 이벤트가 발생했을 때 visible을 true로 설정해주면 해당 이벤트가 발생할 때마다 modal창이 성공적으로 나오게 된다.