[React] Warning: React does not recognize the prop on a DOM element.

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

디자인 작업을 Styled-components 로 작업하고있는데

이제 조건부 스타일을 위해서 타입을 전달해 줘서 적용을 하고 있다.

Warning: React does not recognize the `selectItem` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectitem` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

콘솔창을 열어보니까 에러가 나서 페이지가 안뜨거나

그런건 아닌데 해당 아이템을 인식하지못한다고 하니까 ..

해당 props 를 넘겨줄때는 대문자가 아니라 소문자로 해서 해야한다고 한다.

selectItem → selectitem

으로만 변경해주면 해결 된다.

추가적으로

Warning: Received `true` for a non-boolean attribute `selectitem`.

라는 경고문도 나왔는데 boolean 값으로 보내다 보니 해당 값이

non-boolean 이란다 ...

DOM 요소에서는 boolean 속성이 설계되어있지 않기 때문에 true 가 아닌

'true' string 으로 보내줘야한다고 한다.

또 ~ 추가적으로다가 하나 해결하면 또 하나 나오고 ..

styled-components: it looks like an unknown prop "selectitem" 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 using transient props (`$` prefix for automatic filtering.)

알려지지않은 값이 DOM 요소로 전달되고있다 뭐 그런내용인데 ..

이를 해결하기 위해서 selectitem 이 아닌 $ 를 사용해서

$selectitem 으로 전달해줘여한다고 한다.

$ 를 사용하면 스타일을 생성하는데는 전달되지만

DOM  에는 최종적으로 포함되지않는다고 한다.

여기까지 해서 이제 내 콘솔창에는 경고문도 에러도 떠있지않다 !