2학기 팀 프로젝트를 하면서 css 라이브러리로 styled-components를 선택했다.
styled-components는 컴포넌트 태그를 사용하는 것처럼 css에도 손쉽게 props를 전달할 수 있다는 장점을 가지고 있는데, 오늘은 이 props를 넘겨주는 과정에서 console warning이 뜨는 사항을 해결해보려고 한다!
🚨 Warning: Received 'true' for a non-boolean attribute
변수명경고문
뭐 내가 의도한 동작을 실행하는데는 문제가 없었지만 그냥 개발자도구를 켤때마다 빨간색 경고글씨가 나오는 게 거슬려서 해결하고 싶었다😂
우선 내가 의도했던 동작은 다음과 같다.
- NavIcon에 boolean 값을 가진 active를 이용하여, true일때는
#19bb35를 false일때는#606060의 svg fill 색상을 넣으려고 한다. - 그리고 active는 location.pathname과 item.path이 같다면 true를 아니라면 false를 반환한다는 개념으로 해당 태그에 값을 넣어주었다.
그리고 typescript를 사용했기 때문에 NavIcon styled 태그에 active: boolean이라는 타입도 넣어주었는데도 콘솔에 경고문이 나온 것이다!
⚠️ 그렇다면 왜 경고문이 나왔을까?
styled-components 공식문서: Why am I getting HTML attribute warnings?
위 공식문서의 FAQ를 참고해보면 그 이유를 알 수 있다!
공식문서에서 표현하는 내용을 그대로 해석해보자면,
div, a 태그와 같은 HTML DOM 태그에 비표준 속성이 첨부되고 있음을 나타낸다.
해당 경고문이 표시된다면, HTML DOM 속성에 props를 첨부하고 있을 가능성이 높다.
결론은 태그가 렌더링되는 과정에서 경고문이 뜨는 것이다.
- 우리의 의도: props를 이용해서 css 스타일링 해야지 ~
- 코드가 알아들은 의도: props를 받았으니 styled.
태그명태그명에 값 전달해야지~
태그명에 존재하지 않는 속성명을 props로 전달하여 오류 가능성이 높습니다 !!!!
🥴 해결법
그렇다면 HTML DOM 태그에 전달하지 않고 css 한정으로 전달할수는 없을까?
위는 공식문서에서 설명하는 방법 중, 가장 손쉬운 방법이라고 생각한다.
(styled-components 5.1 버전 이후 한정)
css에 전달하고자 하는 props 값 앞에다가 $ 기호를 붙이는 것이다.
이렇게 붙여주고 다시 렌더링을 해주면, DOM태그에는 전달되지 않아 개발자도구에는 더이상 경고문이 나오지 않게 된다!
