📱테스트 환경
"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 에는 최종적으로 포함되지않는다고 한다.
여기까지 해서 이제 내 콘솔창에는 경고문도 에러도 떠있지않다 !
'Javascript > React' 카테고리의 다른 글
[React] searchParams 동적 라우팅 (0) | 2024.04.30 |
---|---|
[Express] mysql2 Can't add new command when connection is in closed state (0) | 2024.04.29 |
[React] 탭 눌렀을 때 다른 곳으로 이동하는 방법 (0) | 2024.04.25 |
[React] Html Tag 걸러내는 방법 (1) | 2024.04.18 |
[React] 공백문자 추가   (0) | 2024.04.15 |