TIL 20211028 [항해99 43일차]

모달 적용하기

• 모달은 mui를 통해 만들어진 모달 사용

//mui import 해주기
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

• modal에서 필요한 값들은 useSelector에서 가져오기!

const back = useSelector((state) => state.cards.current);
const handlePopup = useSelector((state) => state.cards.isPopup);

return (
    <Grid>
      <Modal
        open={handlePopup}
        onClose={close}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            {back.title}
          </Typography>
          <Typography id="unstyled-modal-description">
            {back.content}
          </Typography>
          <Typography id="unstyled-modal-description">{back.stack} </Typography>
          <Typography id="unstyled-modal-description">
            {back.interest}
          </Typography>
        </Box>
      </Modal>
    </Grid>
  );

-> modal open을 리덕스로 관리했는데 꼭 그렇게 안해도 된다. 오히려 불필요 할 수 있다는 얘기를 듣고 useState에서 관리할 수 있도록 변경했다.

• useState로 모달 관리

 const [shwoModal, setShowMadal] = React.useState(false);

  const behind = async () => {
    await dispatch(loadCurrentCardDB(id));
    // !showModal : showModal이 false이면 이라는 의미
    setShowMadal(!shwoModal);
  };
  
   <CardModal
        show={shwoModal}
        onHide={() => setShowMadal(false)}
        card={currentCard}
      />

---

모달 적용하면서 모달창 열고닫기를 popup으로 리덕스에서도 관리할 수 있고, useState로도 관리 할 수 있다는걸 배웠다. 그리고 mui라이브러리를 통해 만들어진 모달을 사용할 수 있어서 쉽게 적용할 수 있었다. 처음에 적용하고 모달이 여러창이 동시에 겹쳐서 보인 오류가 있었다. 리스트가 맵에서 돌아가고 모달을 리덕스에서 가져와서 겹쳤던거 같은데... useState로 수정하니 해결됐다.😀