리액트 모달창 만들때 주의사항

- 수정전

import ModalBackdrop from "./ModalBackdrop";
import CartModal from "./CartModal";

function Cart(props) {
  return (
    <ModalBackdrop modalHandler={props.modalHandler}> // 이렇게 되면 백드롭이 모달창을 포함하게 되므로 
													// 모달창의 아무곳이나 클릭해도 창이 닫히게됨.
      <CartModal />
    </ModalBackdrop>
  );
}

export default Cart;

백드롭창과 모달창을 따로 분리해서 각각 modalHandler를 보내주어야한다.

- 수정후

import ModalBackdrop from "./ModalBackdrop";
import CartModal from "./CartModal";

function Cart(props) {
  return (
    <>
      <ModalBackdrop modalHandler={props.modalHandler} />
      <CartModal modalHandler={props.modalHandler} />
    </>
  );
}

export default Cart;