[React-Native] 11. Modal 열고 닫기

1. 모달이란?

새로운 창이 열고 닫히는 듯한 애니메이션으로 팝업창이라고도 말함.

2. React-Native에서 모달 만들기

사용방법은 간단하다.

React-Native에서 제공하는 Modal컴포넌트를 사용하면 된다.

3. Modal 불러오기

GoalInput을 모달로 만들어서 불러오도록 한다.

//GoalInput.js

<View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Your Course goal!"
          onChangeText={goalInputHandler}
          value={enteredGoalText}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button title="Add Goal" onPress={addGoalHandler} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" onPress={props.onCancel} />
          </View>
        </View>
      </View>

기존의 GoalInput을 아래와 같이 바꿔준다.

<Modal>
  <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Your Course goal!"
          onChangeText={goalInputHandler}
          value={enteredGoalText}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button title="Add Goal" onPress={addGoalHandler} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" onPress={props.onCancel} />
          </View>
        </View>
      </View>
</Modal>

이렇게 되면 모달의 기본모습은 완성이다.

모달에 옵션을 설정하여 특정상황에서 등장하도록 만들 수 있다.

// App.js

const [modalIsVisible, setModalIsVisible] = useState(false);

// 모달 열기
function startAddGoalHandler() {
    setModalIsVisible(true);
  }
// 모달 닫기
  function endAddGaolHandler() {
    setModalIsVisible(false);
  }

<GoalInput
        addOnGoal={addGoalHandler}
        onCancel={endAddGaolHandler}
        visible={modalIsVisible}
      />

// GoalInput.js

<Modal visible={props.visible} animationType="slide">
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Your Course goal!"
          onChangeText={goalInputHandler}
          value={enteredGoalText}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button title="Add Goal" onPress={addGoalHandler} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" onPress={props.onCancel} />
          </View>
        </View>
      </View>
    </Modal>

이렇게 만들어주면 된다.

visible프로퍼티는 모달이 보이게 안보이게 설정하는 것이고
animationType은 모달이 어떻게 보이는지 설정하는 것이다.

이외에도 많은 프로퍼티가 있으니 참고
https://reactnative.dev/docs/modal