styled-components를 사용하다 보면 가끔 아래의 경고 문구를 만나게 된다.
Warning: Received `true` for a non-boolean attribute `{속성}`.
If you want to write it to the DOM, pass a string instead: {속성}=“true” or {속성}={value.toString()}.직역하면, '불리언타입이 아닌 곳에 false를 줬다. 문자열로 줘라' 라는 뜻이다.
그럼 왜 문자열로 주라는 걸까 생각해봤다.
// ...
return (
<Div toggle={value}>
여긴 div
</Div>
)
// ...
const Div = styled.div<{toggle: boolean}>`
/* ... */
height: {({toggle}) => (toggle ? "60px" : "120px")};
/* ... */
`;보통 위 코드처럼 prop 주게 된다.
실제 DOM 엘리먼트에 전달하기 전에, styled-components 내부에서 비표준 속성을 자동으로 필터링한다.
필터링 되지 않는 것들은 표준 속성이므로 제대로된 타입의 값을 줘야한다.
제대로 된 값을 주지 않으면 경고 문구를 보게 된다.
실제로 div태그에 boolean값을 사용하는 속성은 없다. 대부분 문자열이나 숫자다.
그렇기 때문에 boolean값을 사용하려고 하면 경고 문구가 뜬다고 볼 수도 있겠다.
해결법은 의외로 간단하다.
// ...
return (
<Div $toggle={value}>
여긴 div
</Div>
)
// ...
const Div = styled.div<{$toggle: boolean}>`
/* ... */
height: {({$toggle}) => ($toggle ? "60px" : "120px")};
/* ... */
`;$을 붙여주는 것으로, 실제 DOM에 prop가 전달되는 것을 막을 수 있다.
