[Error] React does not recognize the `imagePath` prop on a DOM element.

styled-components로 생성한 요소에 prop으로 전달한 imagePath에서 위와 같은 에러가 발생했다.

말 그대로 해당 prop이 DOM 요소의 prop으로 인지되지 못하고 의도적으로 custom attribute를 나타낸 것이라면 소문자로 작성해야 한다는 의미이다. 하지만 나는 prop을 카멜케이스로 작성을 하고 싶었고 해결 방안을 styled-components 공식 문서에서 찾았다.

transient props를 이용하면 이를 해결할 수 있다.

transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 렌더링 되는 것을 방지하게 해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다.

<Item
	key={idx}
	$imagePath={content.imagePath}
	onClick={() => navigate(content.path)}
>
	<ItemText>
		<h2>{content.title}</h2>
	</ItemText>
</Item>

export const Item = styled.div`
  cursor: pointer;
  width: 21%;
  height: 400px;
  margin: 2%;

  color: #ffffff;
  overflow: hidden;
  background-image: url(${({ $imagePath }) => $imagePath});

참고

https://styled-components.com/docs/api#using-custom-props
https://styled-components.com/docs/api#transient-props