Warning: React does not recognize the ` ` prop on a DOM element

문제 발생

Portfolly 프로젝트 중, 콘솔에서 다음과 같은 Warning을 발견했습니다.

 

 

콘솔 캡쳐 화면

Warning: React does not recognize the `isSelected` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isselected` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

알 수 없는 props이고 DOM attribute도 아니기 때문에 커스텀 attribute로 넣고 싶으면 소문자로 쓰라는 경고입니다.

 

과거에도 똑같은 워닝을 받았는데, 그때는 경고에서 알려주듯 lowercase로 prop 이름을 바꿔서 해결했습니다. 이번에도 그때와 같이 lowercase로 급하게 문제를 해결했다가, 다른 컴포넌트들은 camelCase로 잘만 네이밍 했는데 얘만 왜 그런지 이유가 너무 궁금해졌습니다.

 

일단 호출한 태그 컴포넌트는 아래와 같습니다.

<Tag key={tag.id} tag={tag} readOnly={true} />

tag={tag} 객체에 isSelected 등 태그에 관련된 속성이 들어가있습니다.

 

그리고 <Tag> 컴포넌트는 다음과 같이 isSelected 여부에 따라 색이 바뀌는 styled-component를 그립니다.

const TagBody = styled.div<{ isSelected?: boolean, readOnly?: boolean }>`
    ...
    
    ${(props) => props.isSelected && !props.readOnly &&
    css`
      border-color: #dcdcdc;
      background-color: white;
      color: #232428;
    `
  }
`;

// 여기 isSelected에서 문제 발생(isselected로 바꾸면 괜찮아짐)
<TagBody isSelected={tag.isSelected} onClick={selectTag} readOnly={readOnly}>

 

isSelected를 selected로 바꾸면 경고가 사라지지만, 네이밍 자체가 마음에 안 들어 다른 방법으로 문제를 해결하고 싶었습니다. 그리고 분명 보다 더 근본적인 문제가 있을 것 같았습니다.

 

해당 경고문이 나타나는 컴포넌트들의 공통점을 찾아보니, 부모 컴포넌트의 props를 직속으로 전달 받는 자식 컴포넌트라는 점이었습니다.

 

 

 

원인

더 찾아보니 이 Warning을 "Unknown Prop Warning" 이라고 부르는 걸 확인했습니다.

 

참고한 스택오버플로우 답변입니다.

react warning computedMatch regarding some case issues?

 

"불확실한 props를 사용한 경우" 발생하는 오류라는 겁니다.

 

이는 공식 페이지에도 아주 잘 나와 있었습니다.

 

경고가 나타난 이유를 번역(ChatGPT의 도움)하면 다음과 같습니다.

 

---

 

1. 혹시 {...this.props} 또는 cloneElement(element, this.props)을 사용하고 있나요? 부모 컴포넌트가 자신의 props를 직접적으로 자식 요소로 전달하고 있는 것 같습니다. 자식 컴포넌트로 props를 전달할 때, 부모 컴포넌트에서 해석되어야 할 props를 실수로 전달하고 있는지 확인해야 합니다.
2. 네이티브 DOM 노드에 비표준 DOM 속성을 사용하고 있는 것 같습니다. 이는 사용자 정의 데이터를 나타내기 위해 표준 DOM 요소에 비표준 속성을 사용하려는 경우입니다. 이럴 때는 MDN (Mozilla Developer Network)에 설명된 대로 사용자 정의 데이터 속성을 사용하는 것을 고려해보세요.
3. React가 아직 지정한 속성을 인식하지 못하는 것 같습니다. 이 문제는 향후 React 버전에서 해결될 가능성이 있습니다. 그러나 현재 React는 알 수 없는 속성을 모두 제거하기 때문에 React 앱에서 해당 속성을 지정해도 렌더링되지 않습니다.
4. React 컴포넌트를 대문자로 사용하지 않은 것 같습니다. React JSX 변환은 대문자 vs 소문자 관례를 사용하여 사용자 정의 컴포넌트와 DOM 태그를 구분합니다. 컴포넌트 이름을 대문자로 시작하도록 하세요.

 

---

 

 

 

해결 방법: Styled-Components가 props를 다루는 방법

styled-components는 모든 props를 DOM 노드까지 전달하는 방식으로 동작합니다.

 

이에 대한 공식 문서를 함께 첨부합니다.

styled-components: Basics

 

정확하게는 모든 props가 DOM 노드까지 전달되는 것은 아니고, styled-component의 처리 기준에 따라 표준이 아닌 속성들은 필터링되어서 전달되지 않는다고 합니다.

 

"Unknown props" 경고 메세지 또한 이런 처리 과정에서 발생한 것입니다.

 

해결 방법은 다음과 같습니다.

 

styled()로 컴포넌트의 스타일을 확장해서, 새로 만든(확장한) 컴포넌트의 문제되는 prop이 DOM까지 전달되지 않게 만듭니다.

 

문제가 되는 props를 처리하지 않는 기존 컴포넌트를 만들고, 그 컴포넌트를 확장해 새로운 styled-component를 작성하면 됩니다.

// 새롭게 만든(곧 확장할) 컴포넌트
const CustomComponent = ({isSelected, ...rest}) => ();

// 컴포넌트 스타일 확장
const TagBody = styled(CustomComponent)`
	${isSelected && readOnly &&
    css`
      border-color: #dcdcdc;
      background-color: white;
      color: #232428;
    `};
`

// 축약형
const TagBody = styled({isSelected, ...rest}) => ())`
	${isSelected && readOnly &&
    css`
      border-color: #dcdcdc;
      background-color: white;
      color: #232428;
    `};
`

 

 

 

 

 

참고 사이트

[Styled components] 외부 컴포넌트를 감쌌더니 "Warning: Unknown props" 경고 메시지가 출력된다면

Warning: Unknown props

[React / Bugfix] Unknown Prop Warning