👨🏻‍💻 개발 블로그
Published on

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이 발생했다. 에러 메시지가 아닌 경고 메시지라서 조금 안심하기는 했지만, 단번에 원인을 파악하지 못해서 구글링을 하게 됐는데 원하는 아티클이 없었다.

(콘솔에 출력된 경고 메시지)

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

키워드

  1. "top"이 DOM으로 전송되는 것처럼 보이며,

  2. props (자동 필터링을 위한 $ 접두사.)

  3. "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 경고 창을 보면 예전에 겪었던 케이스도 많지만 항상 잊어버리고 다시 구글에 검색하거나 노션을 확인하는 경우가 많았다. 이번 포스팅처럼 알고보면 간단한 문제도 제대로 읽어보지 않고 구글링을 하려는 자신을 반성할 수 있었고 앞으로도 에러나 경고 메시지를 만나면 겁 먹지 않고 문제 상황을 정확히 파악하고 해결하지 못하면 검색을 하는 방향으로 바뀔 수 있도록 할 계획이다!