[styled-components/React] React does not recognize the X prop on a DOM element 경고 메시지 해결하기

어떤 에러일까?

 

React does not recognize the X prop on a DOM element.

 

styled-componets로 스타일링한 사용자 지정 속성을 DOM 요소로 전달할 때 발생하는 경고 메시지라고 한다.

 

위 styled-componets 경고문을 해석해보면 buttonSize라는 속성을 styled-components로 래핑된 DOM 요소에 전달되고 있지만, 해당 속성은 HTML 표준 속성이 아니기 때문에 브라우저 콘솔에 오류가 발생할 수 있다는 내용이다.

 

경고문에 따라 아래에 실제 경고가 발생하고 있다!

---

해결 방법?

이를 해결하기 위한 방법이 styled-components 공식 문서에 기재되어 있다.

https://styled-components.com/docs/api#shouldforwardprop

styled-components: API Reference

 

shouldForwardProp의 역할은 사용자 지정 props가 React 노드로 전달되거나 DOM 요소에 렌더링되는 것을 방지해주는 역할이다.

---

적용 예시

따라서 이를 참고하여 공통 컴포넌트로 활용하기 위해 스타일링한 Input 컴포넌트를 다음과 같이 수정하였다.

const StyledInput = styled.input.withConfig({
  shouldForwardProp: (prop) => !['inputSize', 'activeOption', 'borderStyle', 'inputPadding', 'placeholderColor'].includes(prop),
})<StyledInputProps>`
  font-family: 'Pretendard-Regular', sans-serif;
  color: var(--color-black);
  border: 1px solid var(--color-grey-2);
  ${(props) => props.inputSize && inputSizes[props.inputSize]}
  ${(props) => props.activeOption && activeOptions[props.activeOption]}
  ${(props) => props.borderStyle && borderStyles[props.borderStyle]}
  ${(props) => props.inputPadding && inputPaddings[props.inputPadding]}
  ${(props) => props.placeholderColor && placeholderColors[props.placeholderColor]}
  outline: none;
`;

 

추가한 부분은 아래 부분 뿐이고, 이와 같이 수정하니 경고 메시지가 사라진 것을 확인할 수 있었다

.withConfig({
  shouldForwardProp: (prop) => !['inputSize', 'activeOption', 'borderStyle', 'inputPadding', 'placeholderColor'].includes(prop),
})