[styled-components] it looks like an unknown property “X" is being sent through to the DOM

 

경고 내역

 

styled-components: it looks like an unknown prop "category" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid ) or consider sing transient props ($prefix for automatic filtering.)

 

 

 

---

경고 발생 경로

 

위의 Badge는 button 태그로 만들어져 있는데, 해당 HTML 태그에 정의되지 않은 category라는 값을 props로 내려주고 있어 경고가 발생했다.

 

 

 

---

경고 원인

• 위에 적어둔 내용과 같이 스타일드 컴포넌트를 사용해 스타일 된 컴포넌트를 만들 때, 해당 컴포넌트에 정의되지 않은 props가 전달되어 DOM에 전달될 때 발생하는 문제이다.
• 스타일드 컴포넌트에 정의되지 않은 속성을 DOM으로 전달하려고 하면 경고를 발생시킨다.

 

 

 

---

경고 해결 방법

✨ 트랜스파일된 프롭스(Transpiled Props)를 사용한다.

 

• 스타일드 컴포넌트에서 $ 접두사를 사용해 transpiled props를 생성해 속성을 필터링하여, 불필요하게 DOM에 전달되지 않도록 할 수 있다!
• 이는 스타일드 컴포넌트의 내장 기능 중 하나로, $로 시작하는 속성은 자동으로 필터링된다.

 

const MyStyledComponent = styled.div`
  // ...
`;

<MyStyledComponent $status={status} />

 

 

 

위의 내용을 참고하여 전체 코드를 체크한 후 HTML 속성에 해당하지 않는 임의 props들은 모두 $를 붙여주었다.

 

 

 

---

[참고 자료]

https://jakemccambley.medium.com/transient-props-in-styled-components-3105f16cb91f

Transient Props in styled-components

https://okky.kr/questions/1458462

OKKY - [react] styled-component props 경고 메시지 consider using transient props (`$` prefix for automatic filtering.)