<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react">react</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react/emotion/does-not-recognize-props/">[Emotion] React does not recognize the XXXXX prop on a DOM element 문제 해결 방법</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#react-does-not-recognize-the-xxxxx-prop-on-a-dom-element-에러가-발생하는-이유">React does not recognize the XXXXX prop on a DOM element 에러가 발생하는 이유</a></li><li><a href="#shouldforwardprop">shouldForwardProp</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2><code>React</code> 프로젝트에서 <code>Emotion</code>으로 개발을 할 때, 종종 다음과 같은 에러가 발생하곤 합니다.<div><pre><code>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
 ...
</code></pre></div>이번 블로그 포스트에서는 이 에러가 왜 발생하고, 어떻게 문제를 해결할 수 있는지 알아보도록 하겠습니다.<h2 id="react-does-not-recognize-the-xxxxx-prop-on-a-dom-element-에러가-발생하는-이유">React does not recognize the XXXXX prop on a DOM element 에러가 발생하는 이유</h2>우리는 React 프로젝트에서 Emotion으로 스타일을 적용할 때 다음과 같이 스타일을 적용합니다.<div><pre><code>const StyledButton = styled('button')`
 background-color: red;
`
</code></pre></div>이때, Emotion으로 적용한 스타일을 동적으로 변경하고자 할 때, 다음과 같이 Props를 사용하도록 변경합니다.<div><pre><code>interface StyledProps {
 readonly backgroundColor?: string
}

const StyledButton = styled('button')&lt;StyledProps&gt;`
 background-color: ${({ backgroundColor }) =&gt;
 backgroundColor != null ? backgroundColor : 'read'};
`
</code></pre></div>현재 코드는 기본적인 HTML 태그에 스타일을 적용하고 있습니다. 이제 미리 만들어둔 코드에 동적으로 스타일을 적용시켜 보면 다음과 같습니다.<div><pre><code>import { Button } from '@mui/material'

interface StyledProps {
 readonly backgroundColor?: string
}

const StyledButton = styled(Button)&lt;StyledProps&gt;`
 background-color: ${({ backgroundColor }) =&gt;
 backgroundColor != null ? backgroundColor : 'read'};
`
</code></pre></div>예제 코드는 <a href="https://mui.com/" rel="noopener" target="_blank">MUI</a> 라이브러리의 <code>&lt;Button /&gt;</code> 컴포넌트에 Emotion을 사용하여 동적 스타일을 적용한 코드입니다.이렇게 미리 만들어둔 컴포넌트에 스타일을 적용하면 다음과 같은 에러가 발생합니다.<div><pre><code>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
</code></pre></div>이런 에러가 발생한 이유는 <code>MUI</code>가 제공하는 <code>&lt;Button /&gt;</code> 컴포넌트의 <code>Props</code>에 <code>backgroundColor</code>가 존재하지 않기 때문에 문제가 발생합니다.Emotion은 기본적으로 부모 컴포넌트로 전달받은 Props를 스타일의 대상이 되는 컴포넌트에 전달하게 됩니다. 따라서 이와 같은 문제가 발생하게 됩니다.<h2 id="shouldforwardprop">shouldForwardProp</h2>이와 같은 문제를 해결하기 위해 <code>Emotion</code>에서는 <code>shouldForwardProp</code> 옵션을 제공하고 있습니다.<code>shouldForwardProp</code> 옵션을 사용하면, 다음과 같이 부모 컴포넌트로부터 전달받은 <code>Props</code>중에서 스타일의 대상이 되는 컴포넌트에 전달하는 <code>Props</code>를 필터링하여 제공할 수 있습니다.<div><pre><code>import { Button } from '@mui/material'
import type { ButtonProps } from '@mui/material'

interface StyledProps {
 readonly backgroundColor?: string
}

const StyledButton = styled(Button, {
 shouldForwardProp: (propName) =&gt; propName !== 'backgroundColor',
})&lt;StyledProps &amp; ButtonProps&gt;`
 ${(props) =&gt;
 props.backgroundColor != null
 ? `background-color: ${props.backgroundColor};`
 : ''}
`
</code></pre></div><code>MUI</code>가 제공하는 <code>&lt;Button /&gt;</code> 컴포넌트는 기본적으로 <code>ButtonProps</code>를 가지고 있습니다. 여기에 우리가 사용하고자 하는 스타일을 <code>StyledProps</code>를 통해 정의합니다.<div><pre><code>import type { ButtonProps } from '@mui/material'

interface StyledProps {
 readonly backgroundColor?: string
}

const StyledButton = styled(Button, ...)&lt;StyledProps &amp; ButtonProps&gt;`
 ...
`
</code></pre></div>이렇게 정의한 <code>StyledProps</code>와 <code>ButtonProps</code>를 함께 사용하도록 설정하여, 부모 컴포넌트에서 <code>MUI</code>의 <code>&lt;Button /&gt;</code> 컴포넌트의 Props를 사용할 수 있게 하며, 우리가 생성한 Props 데이터도 지정할 수 있게 만듭니다.그런 다음, 다음과 같이 <code>shouldForwardProp</code> 옵션을 사용하여 스타일의 대상이 되는 컴포넌트에 필요한 Props만 전달하도록 변경합니다.<div><pre><code>const StyledButton = styled(Button, {
 shouldForwardProp: (propName) =&gt; propName !== 'backgroundColor',
})&lt;StyledProps &amp; ButtonProps&gt;`
 ...
`
</code></pre></div>그럼 <code>styled</code>함수는 <code>shouldForwardProp</code>의 필터링된 결과를 스타일의 대상이 되는 컴포넌트에 전달하게 되므로, <code>React does not recognize the XXXXX prop on a DOM element</code> 에러를 해결할 수 있습니다.<h2 id="완료">완료</h2>이것으로 <code>Emotion</code>를 사용하여 기존의 존재하는 컴포넌트에 스타일을 적용할 때, 발생하는 문제인 <code>React does not recognize the XXXXX prop on a DOM element</code> 에러가 왜 발생하며, 어떻게 수정하는지에 대해서 알아보았습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Emotion을 사용할 때, 발생하는 React does not recognize the XXXXX prop on a DOM element 문제를 해결하는 방법에 대해서 알아봅시다.