Styled-component에 props 사용 시 React 경고 발생 해결 - $(transient prop)

[rnrgll]

styled-components를 사용하여 스타일링 중에 React에서 다음과 같은 경고 메시지가 나타난다.

경고: DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없습니다.

isActive, fontColor, backgroundColor와 같은 props를 스타일링에 사용 시, HTML 태그에 직접 않도록 해야한다.
해당 prop을 styled-component 내부에서만 사용하고 HTML 요소에 전달되지 않도록 하려면 $ 접두사를 사용해여 prop을 transient prop로 만들면 된다.
이렇게 처리하면 React가 경고를 표시하지 않도록 하고, 렌더링된 HTML에서 불필요한 속성이 제거된다.

참고 사이트 : https://velog.io/@hyerin0930/React-styled-component%EC%97%90-props-%EB%B3%B4%EB%82%BC-%EB%95%8C-%EB%82%98%EC%98%A4%EB%8A%94-warning-%ED%95%B4%EA%B2%B0