React 오류) Received 'false' for a non-boolean attribute 'isactive'

문제 인지

styled-components에 prop를 전달하는 도중 발생한 오류이다.

오류를 확인해보니 다음과 같았다.

경고: 부울이 아닌 특성 'is active'에 대해 'false'를 받았습니다.
DOM에 쓰려면 isactive="false" 또는 isactive={value.toString()} 문자열을 대신 전달합니다.>

해석하자면 boolean 타입이 아닌 특성에 대해서 boolean 값을 받았으니 DOM에 쓸려면 문자열로 바꾸어서 값을 전달해라.

해결 방법 생각

나의 코드는 다음과 같다.

interface IsActive {
  isactive: boolean;
}
const Tab = styled.span<IsActive>`
  
  color: ${(props) =>
    props.isactive ? props.theme.accentColor : props.theme.textColor};

`;
<Tab isactive={chartMatch !== null}>

코드를 살펴보니 Tab이라는 styled-component에

isactive={true or false} 

형식으로 prop이 전달되는것을 확인할 수 있다.
오류를 해석한 바로는 DOM에서 사용하려면 boolean 형식이 아닌 string형식으로 prop이 전달되어야 한다고 생각했다.

문제 해결

interface IsActive {
  isactive: string;
}
const Tab = styled.span<IsActive>`
  
  color: ${(props) =>
    props.isactive === "true" ? props.theme.accentColor : props.theme.textColor};

`;
<Tab isactive={(chartMatch !== null)+""}>

• interface에 isactive속성 타입을 string으로 바꾸고
• isactive prop에 string을 전달( + "" 사용 )

코드를 위와 같이 변경하였더니 오류가 사라졌다.
그냥 처음 코드를 사용해도 UI에는 문제가 없었지만 에러가 보기 싫어서 고쳐 보았다.

DOM에서 사용하려면 boolean 형식이 아닌 string형식으로 prop이 전달되어야 한다고 생각했다.

다만 위에서 에러를 읽고 스스로 생각한 방법의 이유 즉, DOM에 쓸려면 string 형식으로 전달해라...이 에러의 이유를 정확히 알 수가 없었다.
그래서 개발장이님의 글을 읽고 조금이나마 이해가 되었다(감사합니다!!)

추후 이해한 내용을 글로 작성해보도록 하겠다!!