[React] styled-components 에서 $ 를 사용하는 이유

 

styled-components 라이브러리에서 $ 기호는 "트랜지언트 프롭(transient prop)"을 나타냅니다.

 

 

transient prop 의 역할:
이 prop  은 스타일링에만 사용되고 실제 DOM 요소로 전달되지 않습니다.

$ 마크가 없으면 DOM에 알 수 없는 속성이 전달된다는 경고가 발생합니다.

const Lable = styled.label`
  color: ${({$invalid})=> $invalid ? '#f87171' : '#6b7280'};
`

// 사용 예
<Lable $invalid={emailNotValid}>Email</Lable>