[styled-components] props error 해결

소문자 어쩌구 에러

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 요소에서 삭제해라.

 

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

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

React는 camelCase로 DOM 속성으로 인식하는데

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

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