React-Native Modal

기존에 React같은 웹 프레임워크 프로젝트는 직접 모달창을 만들거나 모달 라이브러리를 따로 설치해야 했다.

그러나 RN은 자체적으로 모달 기능이 내장되어 있어 해당 태그를 사용하면 기본적인 모달 on/off를 책임져준다.

import { Modal } from "react-native";

 

View와 Text를 가져올 때처럼 Modal도 그대로 가져올 수 있으며, 내부 UI 태그 바깥으로 <Modal></Modal>을 감싸주면 된다.

 

   <Modal
      visible={visible}
      animationType="slide"
      transparent={true}
      onRequestClose={onClose}
    >
      <TouchableWithoutFeedback onPress={onClose}>
        <View className="flex-1 justify-center items-center bg-black/50">
          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
            <LinearGradient
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              colors={["#FFFFFF", "#FFF4EB", "#FFF8E9"]}
              style={{
                width: 400,
                padding: 10,
                borderRadius: 10,
              }}
            >
              {mode === "isDone" ? (
                <View>
                  <Text className="text-3xl font-bold text-center p-2">
                    Todo를 완료할래요?
                  </Text>
                  <ModalBtn label="삭제" onPress={handleDelete} />
                </View>
              ) : (
                <>
                  <Text className="text-3xl font-bold text-center p-2">
                    Todo
                  </Text>
                  <ModalTitle title={title} onChange={setTitle} />
                  <ModalDesc
                    description={description}
                    onChange={setDescription}
                  />
                  {mode === "read" && todo?.isDone === false && (
                    <View className="flex-row justify-between">
                      <ModalBtn label="수정" onPress={handleUpdate} />
                      <ModalBtn label="삭제" onPress={handleDelete} />
                    </View>
                  )}
                  {mode === "create" && (
                    <ModalBtn label="등록" onPress={onClose} />
                  )}
                </>
              )}
            </LinearGradient>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>

이번 TodoList 프로젝트를 하며 코드의 재사용성을 높이고자 모달창을 상황에 맞게 다른 기능으로 사용할 수 있도록 코드를 짰다.

모달 태그의 속성은 visible, animationType, transparent, onRequestClose 4개로 구성된다.

 

visible은 모달의 상태를 나타내는 속성이다. 즉, visible값이 false냐 true냐에 따라 열리고 닫히는 기능을 한다.

useState를 사용하여 boolean값을 제어해주면 된다.

 

animationType은 모달창이 어떻게 출력될지 결정하는 속성이며, none, slide, fade 3가지 종류가 있다.

• none은 아무 이펙트 없이 즉시 모달창이 생성
• slide는 탭 바쪽 최하단에서 올라와 모달창이 생성
• fade는 지정한 위치에서 서서히 모달창이 생성된다.

transparent는 모달 주변의 배경이 보일지 말지를 결정하는 속성이다.

• true일 시 모달창 주변에 검게 배경이 깔리고, css를 통해 커스텀이 가능하다.
• false일 시 배경 없이 현재 화면에서 모달창만 띄워지게 된다.

onRequestClose는 모바일에서 뒤로가기 버튼 클릭 시 실행되는 콜백함수이다.

보통은 뒤로갈 시 모달창이 닫히는 것이 기본적이기 때문에 모달창이 닫히는 함수를 작성한다.

• 예시) setModal(false) : false시 모달창 제거

 

 

해당 모달창 기능을 이용한 모달 UI이며, 하나의 컴포넌트 코드를 작성해 여러 방식의 모달창 내용을 구현했다.

이런 식으로 컴포넌트의 장점인 유지보수와 재사용성을 높이는 코드를 꾸준히 학습하려고 한다.