styled-components에서 $ 접두사 사용하기

 

 

경고

isOpen이라는 값을 styled-component에 보내주는데 아래와 같은 경고 문구가 로그에 찍혔다.

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

 

발생 이유

DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없기 때문이다. 여기서 isOpen 값은 prop을 스타일링에 사용하고 있으며, 이는 styled-component 내부에서만 사용되어야 하며 HTML 태그에 직접 연결되지 않아야 한다.

 

 

$ 접두사의 역할

$ 접두사를 사용하면 해당 prop이 "transient" prop임을 나타낸다. 이 접두사가 있는 prop은 styled-component로 전달되지만, 실제 HTML 요소로 전달되지 않는다. 이 prop은 스타일링을 위해 MenuItem 컴포넌트에 전달되지만, 렌더링 된 HTML에는 나타나지 않다.
이렇게 하면 React 경고를 방지하고, HTML이 깔끔하게 유지되며, 브라우저가 이해하지 못하는 속성을 실수로 HTML 요소에 전달하는 것을 방지할 수 있다.

 

 

styled-components에서 $ 접두사 사용하기

const MenuItem = styled.div(({ $isActive }) => `
  color: ${$isActive ? 'blue' : 'black'};
`);

<MenuItem $isActive={true}>Active Menu Item</MenuItem>