[Error] React : received `true` for a non-boolean attribute 해결하기

프로젝트를 본격적으로 진행하기 전 와이어프레임으로 UI를 제작하던 중 received `true` for a non-boolean attribute 이런 경고메시지가 나를 괴롭혔다

사실 경고메시지이고 내가 원하는 기능도 제대로 작동하였지만, 빨간색 글씨를 보고도 못 본 척하는 것은 너무 힘든 일이었기에 금방 해결될 거라 믿고 에러의 원인을 고민하였다. (해결하기까지 두시간이 걸렸다)

에러가 말하기를 primary는 non-boolean을 가지는 속성인데 false라는 불리언 값을 주었다고 한다. 하지만 나의 관련 코드를 보면 난 분명 propType으로 bool 타입으로 명시했으며, 설령 그렇지 않더라도 TypeScript가 아닌 JavaScript라면 이런 일로 에러메시지를 줄 만큼 친절하지도 않을 것이다.

구글링으로 찾아낸 문제의 원인은 Styled Components였다. 내가 Styled Components의 컴포넌트에게 props로 전달되기를 희망했던 값이 리액트나 그 누군가가 HTML의 Attributes로 DOM을 조작하기를 희망하는 것으로 이해하여 이러한 에러를 냈던 것이었다.

문제를 이해하고 보니 이러한 에러 메시지가 발생하는 것이 이해는 됐다. 예를들어 input과 관련한 컴포넌트를 만든다 할 때 `disabled`라는 속성을 준다면 StyledComponents의 props로 주는 것인지, HTML 속성으로 주는 것인지 누구도 이해하지 못할 것이기 때문이다.

문제의 원인을 찾았으니 중요한 것은 해결방법이다. 문제의 원인을 이해하고 바로 styled components의 공식문서를 뒤졌다면 금방 해결할 수 있었겠지만, 구글링으로 접근하여 이 방법을 찾는데 오래 걸렸다.

그리고 찾아낸 Styled Components 공식문서 중 FAQs에 Why am I getting HTML attribute warnings?라는 제목의 내용이 있고, 여기서 두 가지 해법을 제공한다.

그중 내가 사용한 해법은 5.1 버전부터 제공하는 transient props이다

const Link = ({ className, text, ...props }) => (
  <a {...props} className={className}>
    {text}
  </a>
)


const StyledComp = styled(Link)`
  color: ${props => (props.$red ? 'red' : 'blue')};
`


<StyledComp text="Click" href="https://www.styled-components.com/" $red />

간단히, 내가 사용할 속성 명 앞에 $기호를 붙여서 DOM요소로 전달되지 않게 하는 방법이다.

내 코드로 적용한다면, 

단순히, 문제가 됐던 primary를 $primary로 바꾸어주어 문제를 해결할 수 있었다.

 

더 이상 에러메시지가 나타나지 않는 모습

 

해결방법을 찾는 과정에 비해 해결방법은 생각보다 훨씬 간단했다.

새로운 기술을 도입할 때나 라이브러리 사용법을 익힐 때 공식문서부터 보는 것을 습관하하려고 노력 중인데 이런 에러도 공식문서에서 쉽게 찾을 수 있다는 것을 배울 수 있는 경험이었다.