[styled-components/React] styled-components: it looks like an unknown prop "X" is being sent through to the DOM... 경고 메시지 해결하기

어떤 에러일까?

styled.div, styled.header 등으로 만든 컴포넌트에
React DOM 요소(HTML)에 원래 없는 prop (나의 경우, isLoaded) 이 전달됐다는 뜻이다.

React는 HTML 태그에 정의되지 않은 속성(prop)을 넘기면 콘솔에 해당 경고를 띄운다

(불필요한 속성 전달 = 성능/표준상 문제)

 

아래 경고 메시지랑 같은 의미이고, 해결하는 방법도 똑같다.

다만, 이 메시지는 styled-components에서, 아래 메시지는 react에서 보내는 차이가 있다.

이번에는 좀 더 쉬운 해결방법을 작성해본다.

React does not recognize the X prop on a DOM element 경고 메시지 해결하기

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

 

---

✅ 해결 방법 1: Transient Prop ($ 접두사 사용) 

const MyDiv = styled.div<{ $isLoaded: boolean }>`
  opacity: ${({ $isLoaded }) => ($isLoaded ? 1 : 0)};
  transition: opacity 0.3s ease;
`;

// 컴포넌트에서 사용할 땐:
<MyDiv $isLoaded={true} />

왜 $ 접두사를 쓰면 괜찮은가?

: styled-components가 자동으로 “이 prop은 스타일링에만 쓰고, DOM에는 전달하지 마” 라고 인식해준다!

 

✅ 해결 방법 2: shouldForwardProp 사용

React does not recognize the X prop on a DOM element 경고 메시지 해결하기

: 해당 방법은 위 포스트에 더 자세히 작성했다.

이 해결 방법은 prop 이름이 바꾸지 않아도 되는 장점이 있다.