👨‍💻 사건

스타일드 컴포넌트를 생성하고, 해당 태그에 props 를 내려받아 속성에 해당하는 스타일을 처리해주기위해 사용했다.

...
<St.ButtonWrapper size={size} state={state} disabled={isDisabled}>
...
export const ButtonWrapper = styled.button<{ size: ButtonSize; state: ButtonState }>`
  display: flex;
  justify-content: center;
	...

렌더하는것에는 문제가 없지만, 해당 button 태그에 필요없는 속성들이 붙었고, 아니나 다를까 warning 문구가 발생하였다.

styled-components: it looks like an unknown prop "state" 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.)

✅ 해결

여러가지 방법이 있지만, 내가 선택한 방법은 transient props를 사용하는것을 택하였다.
$ 접두사를 사용하여 transient props를 만들면, 이 props는 styled component의 스타일링을 위해 사용되지만 실제 DOM 요소로 전달되지 않아 원하는 방향이다.

...
<St.ButtonWrapper $size={size} $state={state} disabled={isDisabled}>
  ...
</St.ButtonWrapper>
...
export const ButtonWrapper = styled.button<{ $size: ButtonSize; $state: ButtonState }>`
  display: flex;
  justify-content: center;
	...

💭 개선

• 무엇때문인지는 모르겠으나, 현재 만들고있는 버튼을 app 에서 테스트 해보려고 import 하여 사용했을때, props 를 적지않아도 타입 오류가 발생하지 않는 에러가 발생하였다. 이를 처리하고자 여러 방안을 테스트 해보도록 해야겠다.