[Error] styled-components: it looks like an unknown prop "문제가 되는 props" is being sent through to the DOM, which will likely trigger a React console error. 경고 해결법

기존에 제작했던 프로젝트 리팩토링 과정에서 top이라는 props 변수를 생성해 styled-components 태그에서 사용하려고 보니 콘솔에 styled-components 관련 warning이 발생했습니다. 사실 경고가 발생해도 진행이 되긴 하지만.. 없애드리는 것이 인지상정
장문의 영어로 구성된 메시지도 두려워하지 마세요. 구글 번역기가 있습니다! here we go~

StyledComponent.ts:139 styled-components: 알 수 없는 prop "top"이 DOM으로 전송되는 것처럼 보이며, 이로 인해 React 콘솔 오류가 발생할 수 있습니다. 알 수 없는 소품의 자동 필터링을 원하는 경우 <StyleSheetManager shouldForwardProp={...}>(@emotion/is-prop-valid와 같은 API 연결)를 통해 해당 동작을 선택하거나 일시적인 사용을 고려할 수 있습니다. props (자동 필터링을 위한 $ 접두사.)

키워드

1. "top"이 DOM으로 전송되는 것처럼 보이며,
2. props (자동 필터링을 위한 $ 접두사.)

1. "top"이 DOM으로 전송되는 것처럼 보이며, ( top은 제가 지정한 props 변수명 )

ex) <StyledInputBox className='mintmin' top='top'>

위 코드를 보면 제가 props로 styled-components에 내려줄 top이 DOM 입장에서는 속성(attribute)처럼 받아들일 수 있다는 경고입니다. className은 속성이 맞지만, top은 props이므로 에러가 발생할 수 있기 때문에 구분이 필요하다고 하네요.

해결방법

해결 방법도 친절하게 경고 창에 표시되어 있습니다.
2. props (자동 필터링을 위한 $ 접두사.)

$를 props로 사용할 변수명 앞에다가 붙혀 명시를 해주면, 이 props 변수는 styled-components에서만 사용하겠다는 명시적인 의미를 가지게 됩니다.

기존

<StyledInputBox className='mintmin' top='top'>  -> 기존 태그

const StyledInputBox = styled.div< { top?: string } >`
  border-top: ${(top) => top === 'top' ? '0px' : 'solid 2px #D9D8D7'};
`; 

변경 후

<StyledInputBox className='mintmin' $top='top'> 

const StyledInputBox = styled.div< { $top?: string } >`
  border-top: ${($top) => $top === 'top' ? '0px' : 'solid 2px #D9D8D7'};
`; 

수정해 주면~ 경고 한 점 없는 맑은 콘솔 창이 됩니다!

후기

에러 or 경고 창을 보면 예전에 겪었던 케이스도 많지만 항상 잊어버리고 다시 구글에 검색하거나 노션을 확인하는 경우가 많았던 것 같습니다. 이번 경고는 프로젝트를 새로 진행하면 항상 만나는 단골손님 같은 존재라서 항상 포스팅하려고 생각하다가 드디어 포스팅하게 되었습니다.

느낀 점
1. 컴퓨터는 거짓말을 하지 않는다. (아주 가끔은 하기도 한다..)
2. 출력되는 메시지를 잘 확인해 보면 답을 찾을 수 있기 때문에 무턱대고 구글에 검색하기보다는 잘 읽어보고 해결해 보는 습관을 가져야겠다.