07. 자살예방웹사이트 - Received `true` for a non-boolean attribute `--`.

문제 : boolean 형태가 아닌 문자열 형태로 값을 전달해라

export const HighlightText = styled.span<{ $showunderline?: boolean }>`
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: ${(props) => (props.$showunderline ? "underline" : "none")};
  cursor: pointer;
`;

<FileAttachment showunderline> 파일 첨부</FileAttachment>

 

Why?

불리언(Boolean) 타입이 아닌 속성(attribute)에 true 값이 전달되었을 때 발생하는 오류를 나타냅니다. 이런 종류의 오류는 주로 데이터 형식이나 속성의 예상된 형식과 일치하지 않을 때 발생합니다. 실제 DOM 엘리먼트에 전달하기 전에, styled-components 내부에서 비표준 속성을 자동으로 필터링한다는 것이다.

 

해결 방법 01

: $붙여주기, props 가 실제 DOM 요소에 전달되는 것을 막아준다.

export const HighlightText = styled.span<{ $showunderline?: boolean }>`
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: ${(props) => (props.$showunderline ? "underline" : "none")};
  cursor: pointer;
`;

 <SigninBox $showunderline>로그인</SigninBox>