[Book Buddy / Error Note] styled-components의 porps의 DOM전송 경고

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

 

 

요놈시키...

 

 

 

검색창을 만들면서 icon size를 변경할 수 있도록 props를 뚫었는데 여기서 나는 경고메시지다.

iconSize는 props인데 속성(attribute)로 인식될 수 있기 때문에 나는 경고라고 한다.

 

해결법도 경고메시지에 나와있는데, 크게 두 개로 나뉘는 것 같다. 

 

 

1. StyleSheetManager 사용하기

opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`)

 

style sheet manager에 대한 해결 코드도 찾긴 찾았으나 2번을 먼저 시도하여 성공하기도 했고, 공부에 시간이 조금 걸릴 듯 하여 일단 넘어갔다. 다음번에 같은 경고메시지가 뜨면 이 쪽을 자세히 살펴볼 예정.

  <StyleSheetManager
    enableVendorPrefixes
    shouldForwardProp={(propName, elementToBeRendered) => {
      return typeof elementToBeRendered === 'string' ? isPropValid(propName) : true;
    }}
    {...props}
  >
    <ThemeProvider theme={theme}>
      {...}
    </ThemeProvider>
  </StyleSheetManager>

코드출처: https://github.com/styled-components/styled-components/issues/4071

 

 

 

2. 임시 속성 사용하기

consider using transient props (`$` prefix for automatic filtering.)

 

나는 이 쪽 방법으로 해결했다. 

찾아본 블로그에 따르면 접두사 $를 이용해 styled-components에서만 사용하겠다는 의미를 가질 수 있다고 한다. 

 

 

일단 최상단에 있는 문제의 코드 iconSize 앞에 $를 붙여준 후 iconSize가 사용된 곳을 모조리 찾아서 똑같이 $를 붙여주었다.

 

 

딱히 에러가 뜨는게 아니어서 놓치기 쉽지만 styled-components에 쓰인 부분까지 꼼꼼히 찾아서 붙여주니 경고메시지가 사라졌다. 

 

 

 

 

---

참고자료

 

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

 

https://velog.io/@mintmin0320/styled-components-it-looks-like-an-unknown-prop-%EB%AC%B8%EC%A0%9C%EA%B0%80-%EB%90%98%EB%8A%94-props-is-being-sent-through-to-the-DOM-which-will-likely-trigger-a-React-console-error.-%EA%B2%BD%EA%B3%A0-%ED%95%B4%EA%B2%B0%EB%B2%95