[React] React does not recognize prop on a DOM element. 오류, styled-components props 오류, StyleSheetManager

문제발생

위와 같은 오류가 한 세개정도 나왔는데, 모두 styled-components props 들이었다. 이 오류가 무엇인고 하니 GPT는 아래와 같이 설명했다.

zIdx와 같은 컴포넌트 속성명을 사용할 때 경고가 발생하는 이유는 해당 속성들이 HTML의 표준 속성이 아니기 때문입니다. React는 HTML 요소에는 표준 속성만 인식하고 처리할 수 있습니다.

해결방법

여러가지 블로그를 보면서 해결하기 위해 노력했고, fragement를 사용도 해보았지만 해결되지 않았다. 당연히 에러 메세지에서 알려주는 소문자로도 바꿔보았지만 되지 않았다. 왜일까를 검색하다가 찾게된 두가지 방법으로 해결할 수 있었다. 2번을 추천한다!

1. StyleSheetManager

import { StyleSheetManager } from 'styled-components';

function App() {
  return (
    <RecoilRoot>
      <StyleSheetManager
        shouldForwardProp={(prop) =>
          prop !== 'zIdx'
        }
      >
        <GlobalStyle />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/login' element={<Login />} />
          <Route path='/products/:id' element={<ProductDetail />} />
        </Routes>
      </StyleSheetManager>
    </RecoilRoot>
  );
}
export default App;

StyleSheetManager는 styled-components에서 제공하는 컴포넌트이다. styled-components가 동적으로 생성된 스타일 태그를 관리하는 역할을 하고 주로 서버 사이드 렌더링(SSR) 시나리오에서 적용된다. 서버와 클라이언트 간 스타일 일치를 위해 필요하다고 한다.

일부 HTML 속성은 React의 내장 속성과 충돌할 수 있는데 이러한 충돌을 방지하기 위해서 styled-components는 기본적으로 스타일이 적용된 컴포넌트에 사용되는 모든 속성을 DOM으로 전달하지 않는다고 한다. 대신에 스타일 태그에 해당 속성을 추가하여 스타일이 적용되도록 한다. 이로 인해 일부 속성은 React가 인식하지 못하게 되어서 경고가 발생한다.

StyleSheetManager를 사용하면 styled-components가 해당 속성을 DOM으로 전달하도록 설정할 수 있고, StyleSheetManager는 styled-components에서 생성된 모든 스타일 태그를 관리하고, 스타일이 적용된 컴포넌트에서 해당 속성을 정상적으로 사용할 수 있도록 한다. 따라서 StyleSheetManager를 사용하면 zIdx 속성을 컴포넌트에 전달하고 React가 인식할 수 있도록 한다. shouldForwardProp 속성을 사용하여 해당 속성을 DOM으로 전달한다. StyleSheetManager를 이용하면 styled-components의 속성 관리를 세밀하게 조정하면 충돌이나 경고를 처리할 수 있게 된다고 한다.

2. $ 달러 접두사

사용예시

// in styled-components
z-index: ${(props) => (props.$zIdx ? 9999 : 'auto')};

// in other file
<UserButtonStyle $zIdx={type === 'person'} />

styled-components에서의 $ 접두사는 props의 이름을 커스텀 속성으로 지정할 때 사용된다. zIdx와 같이 대문자가 포함된 속성은 DOM 요소에 직접 적용되지 않기에 생긴 오류라 $zIdx와 같이 커스텀 속성으로 정의하는 것이 좋다고 한다. 이와 같이 $를 사용하여 커스텀 속성을 정의하면 코드에서 속성의 역할과 의도를 더 명확하게 표현할 수 있으며, 충돌이나 오류를 방지할 수 있다.