오류해결

[styled-components] props error 해결

Summer.dev 2023. 9. 7. 22:41

소문자 어쩌구 에러

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

무슨 뜻 인가요?

리액트는 DOM 요소에서 isVisible property를 인식하지 않는다.

만약에 의도적으로 사용자 정의 속성으로써 DOM에 표시하려면 isVisible 대신 소문자 스팰링을 써라.

만약 부모 컴포넌트로부터 실수로 전달했다면 DOM 요소에서 삭제해라.

 

ReactDOM 요소로 전달되는 모든 props들이 유효한 HTML 속성이어야 하는데

정의 되지 않는 속성을 사용하려니 경고문이 뜬 것입니다.

ReactcamelCaseDOM 속성으로 인식하는데

isVisible 처럼 camelCase의 속성 이름은 button요소의 속성으로 들어가게 됩니다.

 

그래서 소문자로 바꾸면 뜨는 경고문

해결방법

1. @emotion/is-prop-valid 패키지를 설치하고 StyleSheetManager를 사용

2. transient props(prefix `$` 키워드)를 사용해서 해당 prop을 필터링하면 DOM으로 전달되지 않습니다.

 

저는 간단하게 선언부와 호출부에 isVisible 대신 $isVisible로 작성하여 경고문을 없앴습니다.

<Button 
	$isSelected = { //$추가
	selectedCategory.categoryId === categories[index].categoryId
}/>

const Button = styled.button<{ $isSelected: boolean }>`
  border: ${(props) =>
    props.$isSelected //$추가
      ? '4px solid var(--color-pink-1)'
      : '4px solid transparent'};

  //나머지 생략
`;

Ref

https://styled-components.com/docs/api#transient-props

 

styled-components: API Reference

API Reference of styled-components

styled-components.com

https://github.com/styled-components/styled-components/issues/4049

 

it looks like an unknown prop is being sent through to the DOM, which will likely trigger a React console error. · Issue #4049

Hi everyone! Thanks for the incredible tool, guys! Could you please tell what to do if the prop is really needed for the underline react Button component?

github.com