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}
      />