DiaryProject(React) - 작성한 일기 목록 보여주기(2)

개요

버튼 태그를 통해 작성한 일자와 기본 데이터를 보여주기까지 구현을 완료했고, 이번 작업에서는 antd Modal Component를 통해 모달을 통해 다이어리의 데이터를 끌어올 수 있게 구현해봤다.

구현과정

• 버튼을 누르면 이벤트가 발생하면서 invisible처리된 모달이 visible로 바뀌는 걸 이용해서 버튼을 누를 때 모달 내부에 데이터가 표시되도록 했다. 전에 했던 것과 동일하게 하나의 버튼-모달 set을 div태그로 감싸서 index로 고유 속성을 추가했다.

부모 컴포넌트  
const showModal = (e) => {
    setVisible(true);
    setModalText(JSON.stringify(sortList[e.target.parentNode.getAttribute('index')]));
  };



태그가 복제되는 컴포넌트 
const MapButton = memo(({modalText, index, props, confirmLoading, showModal, handleOk, handleCancel, visible}) => {
  return (
    <div index={index}>
      <Button index={index} onClick={showModal}>
        {props.diary_reg_date.slice(0, 10)}일에 작성! {props.diary_weather_type} {props.diary_feel_type}
      </Button>
      <Modal
        mask={true}
        maskStyle={{backgroundColor: 'transparent'}}
        title='Title'
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}>
        <p>{modalText}</p>
      </Modal>
    </div>
  );
});

결과

• DiaryList를 들어가면 목록이 최신 순으로 정렬되어 출력된다.
• button을 누르면 모달창이 띄워지며 그 내부에는 버튼 제목과 맞는 데이터가 들어가있다.