[styled-components] Props Warning 해결하기

styled-components props를 전달할때 wordLength에서 위와 같은 에러가 발생했다.

커스텀 속성으로 DOM에 나타내고 싶다면 소문자로 변경하거나, 의도치 않게 부모 컴포넌트로 부터 내려온 prop이면 제거하라

React는 camelCase로 DOM 속성을 인식하는데,
wordLength는 정의 되지 않는 DOM 속성이기 때문에 경고가 뜨게 된 것.
lowercase로 작성하면 간단하게 해결되는 문제이지만, 카멜케이스로 작성하는 것을 선호하기에 해결 방안을 styled-components 공식 문서에서 찾을 수 있었다.

문제 해결

공식문서에 따르면 transient props를 이용하여 해결할 수 있는데,
접두사 $를 prop 앞에 추가해주면 간단히 해결된다.

transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 넘어가는 것을 방지해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다.

<CircleText className="circle-text" key={idx} index={idx} $wordLength={charArray.length}>
  {item}
</CircleText>
             
 const CircleText = styled.span<CircleTextProps>`
  position: absolute;
  left: 75px;
  transform: ${(props) => `rotate(${props.index * (360 / props.$wordLength)}deg)`};
  transform-origin: 0 75px;
  text-transform: uppercase;
  font-family: 'Montserrat', 'sans-serif';
  font-weight: 100;
  font-size: 0.8rem;
`;

참고
https://styled-components.com/docs/api#using-custom-props
https://styled-components.com/docs/api#transient-props