react modal 창 구현

프로젝트에서 가장 많이 사용하는 기능은 modal 창인 것 같습니다.
react 라이브러리가 잘 되어있어서 라이브러리를 다운 받아 사용하는 경우도 많지만,
직접 구현해 보는 것도 좋은 공부가 될 것 같아 modal창을 구현해보았습니다.
제가 구현한 방법은 hook를 이용해 true와 false에 따라 모달창이 나타나고 사라지도록 하였습니다.
모달창도 하나의 태그이기 때문에 모달창이 나타나면 다른 태그들이 밀림 현상이 나타납니다.
이런 현상을 방지하기 위해 positive를 활용해 부모 태그에는 position:reletive를 적용시켜주고 자식 태그(모달창)에는 position:absolute를 적용시켜줍니다.
이렇게 되면 absolute를 가진 자식 태그(모달창)은 부모의 울타리 안에는 있지만, 그 울타리 안에서는 누구에게도 영향을 받지 않습니다.
그 다음 중요하게 생각할 부분이 모달창을 구현한 뒤 배경만 약간 어둡게 해주어야 모달창이 좀 더 돋보이게 나타날 수 있습니다.
이것을 활용하기 위해 opacity를 사용하면 전체가 어두워지기 때문에 backgorund-color속성에 rgba를 사용해 투명도를 주면 해당 태그(부모)만 어두워지게 되어 모달창이 돋보이게 적용할 수 있습니다.
아래 코드는 react와 styled-componets를 활용해 구현한 코드입니다.

function Modal() {
  const [isModal, setIsModal] = useState(false);
  const ModalHandler = () => {
    setIsModal((prev) => !prev);
  };
  return (
    <>
      <Wrapper>
        <Title>Modal</Title>
        {isModal ? (
          <ModalBackground>
            <ModalBox>
              <ModalBtn onClick={ModalHandler}>X</ModalBtn>
              HELLO CODESTATES!
            </ModalBox>
          </ModalBackground>
        ) : (
          <OpenModal onClick={ModalHandler}>Open Modal!</OpenModal>
        )}
      </Wrapper>
    </>
  );
}

const OpenModal = styled.button`
  background-color: ${(props) => props.theme.blue};
  width: 150px;
  height: 80px;
  border: none;
  border-radius: 30px;
  color: white;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
`;
const ModalBackground = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 100, 100, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
`;
const ModalBox = styled.div`
  position: relative;
  width: 400px;
  height: 150px;
  z-index: 10;
  color: ${(props) => props.theme.blue};
  background-color: white;
  font-size: 30px;
  font-weight: 600;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;
const ModalBtn = styled.button`
  margin-bottom: 30px;
  border: none;
  background-color: white;
  font-size: 20px;
  cursor: pointer;
`;