[Emotion] React does not recognize the XXXXX prop on a DOM element 문제 해결 방법

개요

React 프로젝트에서 Emotion으로 개발을 할 때, 종종 다음과 같은 에러가 발생하곤 합니다.

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

이번 블로그 포스트에서는 이 에러가 왜 발생하고, 어떻게 문제를 해결할 수 있는지 알아보도록 하겠습니다.

React does not recognize the XXXXX prop on a DOM element 에러가 발생하는 이유

우리는 React 프로젝트에서 Emotion으로 스타일을 적용할 때 다음과 같이 스타일을 적용합니다.

const StyledButton = styled('button')`
  background-color: red;
`

이때, Emotion으로 적용한 스타일을 동적으로 변경하고자 할 때, 다음과 같이 Props를 사용하도록 변경합니다.

interface StyledProps {
  readonly backgroundColor?: string
}

const StyledButton = styled('button')<StyledProps>`
  background-color: ${({ backgroundColor }) =>
    backgroundColor != null ? backgroundColor : 'read'};
`

현재 코드는 기본적인 HTML 태그에 스타일을 적용하고 있습니다. 이제 미리 만들어둔 코드에 동적으로 스타일을 적용시켜 보면 다음과 같습니다.

import { Button } from '@mui/material'

interface StyledProps {
  readonly backgroundColor?: string
}

const StyledButton = styled(Button)<StyledProps>`
  background-color: ${({ backgroundColor }) =>
    backgroundColor != null ? backgroundColor : 'read'};
`

예제 코드는 MUI 라이브러리의 <Button /> 컴포넌트에 Emotion을 사용하여 동적 스타일을 적용한 코드입니다.

이렇게 미리 만들어둔 컴포넌트에 스타일을 적용하면 다음과 같은 에러가 발생합니다.

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

이런 에러가 발생한 이유는 MUI가 제공하는 <Button /> 컴포넌트의 Props에 backgroundColor가 존재하지 않기 때문에 문제가 발생합니다.

Emotion은 기본적으로 부모 컴포넌트로 전달받은 Props를 스타일의 대상이 되는 컴포넌트에 전달하게 됩니다. 따라서 이와 같은 문제가 발생하게 됩니다.

shouldForwardProp

이와 같은 문제를 해결하기 위해 Emotion에서는 shouldForwardProp 옵션을 제공하고 있습니다.

shouldForwardProp 옵션을 사용하면, 다음과 같이 부모 컴포넌트로부터 전달받은 Props중에서 스타일의 대상이 되는 컴포넌트에 전달하는 Props를 필터링하여 제공할 수 있습니다.

import { Button } from '@mui/material'
import type { ButtonProps } from '@mui/material'

interface StyledProps {
  readonly backgroundColor?: string
}

const StyledButton = styled(Button, {
  shouldForwardProp: (propName) => propName !== 'backgroundColor',
})<StyledProps & ButtonProps>`
  ${(props) =>
    props.backgroundColor != null
      ? `background-color: ${props.backgroundColor};`
      : ''}
`

MUI가 제공하는 <Button /> 컴포넌트는 기본적으로 ButtonProps를 가지고 있습니다. 여기에 우리가 사용하고자 하는 스타일을 StyledProps를 통해 정의합니다.

import type { ButtonProps } from '@mui/material'

interface StyledProps {
  readonly backgroundColor?: string
}

const StyledButton = styled(Button, ...)<StyledProps & ButtonProps>`
  ...
`

이렇게 정의한 StyledProps와 ButtonProps를 함께 사용하도록 설정하여, 부모 컴포넌트에서 MUI의 <Button /> 컴포넌트의 Props를 사용할 수 있게 하며, 우리가 생성한 Props 데이터도 지정할 수 있게 만듭니다.

그런 다음, 다음과 같이 shouldForwardProp 옵션을 사용하여 스타일의 대상이 되는 컴포넌트에 필요한 Props만 전달하도록 변경합니다.

const StyledButton = styled(Button, {
  shouldForwardProp: (propName) => propName !== 'backgroundColor',
})<StyledProps & ButtonProps>`
  ...
`

그럼 styled함수는 shouldForwardProp의 필터링된 결과를 스타일의 대상이 되는 컴포넌트에 전달하게 되므로, React does not recognize the XXXXX prop on a DOM element 에러를 해결할 수 있습니다.

완료

이것으로 Emotion를 사용하여 기존의 존재하는 컴포넌트에 스타일을 적용할 때, 발생하는 문제인 React does not recognize the XXXXX prop on a DOM element 에러가 왜 발생하며, 어떻게 수정하는지에 대해서 알아보았습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!