[리액트 강의 복습 02] 리액트 모달창 UI 만들기

리액트 환경에서, 동적인 UI 만들기(모달창 만들기)

{isModalVisible === true ? (
    <Modal
      isVisible={isModalVisible}
      title={posts[modalIndex].title}
      postDate={posts[modalIndex].publishDate}
      postContent={posts[modalIndex].content}
      skyblue={"skyblue"}
      changeTitle={() => changeTitle(modalIndex)} // changeTitle 함수를 props로 내려줌
      toggleModal={() => toggleModal(modalIndex)} // toggleModal 함수를 props로 내려줌
      modalIndex={modalIndex}
    ></Modal>
  ) : null}

삼항연산자를 이용해서, modal 을 보여주도록 하고 있다. 

지금 모달에 대한 설명을 하자면, 

게시글 상세보기를 modal 창을 이용해서 보여주고 있다.

여기서 게시글 상세보기를 누르면

모달창이 나오는 것이다. 

 

모달창을 띄우는 것/ 모달창을 닫는 것 => 상태변화가 2가지 이기 때문에 boolean 필드로 변수를 설정해주었고 

const [isModalVisible, setModalVisibility] = useState(false);

온클릭을 통해서 

const toggleModal = (index) => {
    setModalVisibility(!isModalVisible);
    setModalIndex(index);
};

setModalVisibility 로 State 를 변경해주었다. 

각 게시글마다, 게시글 상세보기 버튼이 있으므로 

각게시글의 index 를 받아줄 수 있도록 매개변수를 index 로 설정해주었다. 

 

// modal 컴포넌트 만들기
function Modal(props) {
  if (props.isVisible === true) {
    const modalTitle = props.title || "제목이 없습니다.";
    const postDate = props.postDate || "날짜가 없습니다.";
    const postContent = props.postContent || "상세내용이 없습니다.";

    return (
      <div
        className="modal fade show"
        style={{ display: "block" }}
        tabIndex="-1"
        role="dialog"
      >
        <div
          className="modal-dialog text-center modal-dialog-centered"
          role="document"
        >
          <div className="modal-content rounded-5 shadow p-4">
            <div className="mb-3">
              <div className="d-block">
                <h1 className="modal-title fs-5">{modalTitle}</h1>
              </div>
              <div className="d-block">
                <p className="modal-date ml-auto">{postDate}</p>
              </div>
            </div>
            <div className="modal-body py-0 text-center">
              <p>{postContent}</p>
            </div>
            <div className="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
              <button
                type="button"
                className="btn btn-lg btn-primary"
                onClick={props.changeTitle}
              >
                제목 변경
              </button>
              <button
                type="button"
                className="btn btn-lg btn-secondary"
                onClick={props.toggleModal}
                data-bs-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  } else {
    return null;
  }
}

모달창의 html 은 다음과 같다.