컴포넌트를 다 만들었으면 CommentInput에서 방금 만든 컴포넌트 CommentModal을 불러와서 사용해보세요.

components/CommentInput.tsx

import React, {useState} from 'react';
import {StyleSheet, Text, Pressable} from 'react-native';
import CommentModal from './CommentModal';

export interface CommentInputProps {
  articleId: number;
}

function CommentInput({}: CommentInputProps) {
  const [writingComment, setWritingComment] = useState(false);

  const onPress = () => {
    setWritingComment(true);
  };
  const onClose = () => {
    setWritingComment(false);
  };
  const onSubmit = (message: string) => {
    setWritingComment(false);
    // TODO: 구현 예정
    console.log(message);
  };
  return (
    <>
      <Pressable style={styles.block} onPress={onPress}>
        <Text style={styles.text}>댓글을 입력하세요</Text>
      </Pressable>
      <CommentModal
        onClose={onClose}
        visible={writingComment}
        onSubmit={onSubmit}
      />
    </>
  );
}

(...)

이 컴포넌트를 저장한 뒤, CommentInput 컴포넌트를 눌러보세요. 앞에서 본 그림 15-16처럼 CommentModal이 화면에 나타났나요? 이 컴포넌트가 나타났을 때 검정 영역을 눌러보거나, 안드로이드에서 뒤로 버튼을 눌렀을 때 이 컴포넌트가 사라지는지도 확인해보세요.