[Warning] styled-components 속성을 인식하지 못할 때

상황

styled-components로 isActive라는 props를 전달하여 버튼을 눌렀을 때 나오는 스타일에 대한 css를 다르게 만들었는데, 

계속 개발자 도구에 아래와 같은 경고 메시지가 나타났다.

 

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

 

번역을 돌려보니 DOM 요소에 있는 'isActive'라는 속성을 인식할 수 없다는 내용이었다.

 

에러가 아닌 경고이다 보니 원하던 기능대로 작동은 하였다.

 

해결하기 위한 시도

• isActive를 isactive로 소문자 형태로 변경
• 다른 부모 컴포넌트에서 props 내려주고 그걸 받아서 전달

하지만 역시나 해결되지 않았다.

 

구글링을 했지만 해결방법을 찾을 수 없어 튜터님께 도움을 요청했다.

 

[문제 코드]

Member.jsx

import React from "react";
import { MemberItem, MemberThumbButton, MemberThumbnail } from "./MemberStyles";

export default function Member({ data, onClickHandler, isActive }) {
  return (
    <MemberItem onClick={onClickHandler}>
      <MemberThumbnail>
        <MemberThumbButton type="button" isActive={isActive}>
          <img src={data.thumbnail} alt={`${data.artist} 썸네일`} />
        </MemberThumbButton>
      </MemberThumbnail>
      <strong>{data.artist}</strong>
    </MemberItem>
  );
}

 

MemberStyles.js

import styled from "styled-components";

export const MemberThumbButton = styled.button`
  //생략
  filter: ${(props) => (props.isActive === "true" ? "unset" : "grayscale(1)")};
`;

 

해결 방법

경고가 발생한 원인은 컴포넌트를 styled-components로 인식하지 못해서 DOM 요소로 바라보고 isActive라는 속성을 인식할 수 없다고 하는 것이었다. 

DOM 요소로 생각하면 button 에는 원래 isActive라는 속성이 없기 때문이다.

 

해결방법은 props에 $ 를 붙여서 styled-components임을 인식하게 만들 수 있다.

경고 메시지가 사라졌다.

 

[코드]

Member.jsx

isActive -> $isActive로 변경

<MemberThumbButton type="button" $isActive={isActive}>
  <img src={data.thumbnail} alt={`${data.artist} 썸네일`} />
</MemberThumbButton>

 

MemberStyles.js

props.isActive -> props.$isActive로 변경

filter: ${(props) => (props.$isActive === "true" ? "unset" : "grayscale(1)")};

 

 

느낀 점

어제부터 구글링을 계속했는데 해답을 찾을 수 없어서 너무 답답했다... 

이제 같은 에러가 생긴다면 기억에 남아서 바로 해결할 수 있을 것 같다. 

이렇게 또 하나 배운 것 같다.