Styled-components 태그에 속성 추가하는 법

매번 className으로 모달 관리하기 번거로울 때

매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.

예시 : 모달

interface ModalProps {
  isOpen : boolean;
  onClose: ()=> void;
  onClick: ()=> void;
}

function Modal ({isOpen, onClose, onClick}:ModalProps) => {

  return (
   <>
       <Container $isOpen={isOpen}>
    Hello
    </Container>
       <Dimed $isOpen={isOpen} onClick={onClose} />
   </>
 );
};

export default Modal;

const Container = styled.div<$isOpen : boolean>`
  width: 294px;
  height: 120px;

  display: ${({ $isOpen }) => ($isOpen ? "block" : "none")};

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  background-color: #fff;
  `