[react] styled-components로 props 전달 시 에러

React 프로젝트에서 styled-components를 사용하면서 backgound-color를 props로 전달하려고 할 때, 경고가 발생했습니다.

해당 경고는 React가 background라는 요소를 props로 인식하지 않고 HTML DOM 요소로 인식하면서 background라는 속성을 인식할 수 없기 때문에 발생합니다.

이를 간단하게 해결하기 위해서는 props 앞에 $를 붙여주면 됩니다.

import styled from 'styled-components'

const CardWrappr = styled.div`
  display: flex;
  flex-direction: column;
  cursor: pointer;

  background-color: ${(props) => props.$background || "rgb(138, 192, 56)"};
`;


export default function Card() {
  return <CardWrappr $background={$background}>;
}

이렇게 하면 styled-components에서 해당 props가 DOM에 전달되지 않도록 필터링하게 되어 더 이상 경고가 뜨지 않게 됩니다.