styled-components props 사용 시 prefix ($)

styled-components 라이브러리는 최근에 자체 내부 동작을 개선하기 위해 "$" 접두사를 도입했습니다. 이런 문자를 사용하면, 외부로서 노출되지 않는(as in, not passed down) props를 styled-components에 전달할 수 있습니다. 예시로: ```jsx // 기존의 방법 const Button = styled.button` color: ${props => props.primary ? 'palevioletred' : 'black'}; `; ``` 위 코드에서 `primary` prop은 실제 DOM 요소인 button에게까지 전달됩니다. 이렇게 되면 React DevTools에서 확인할 때 원치 않는 prop을 볼 수 있어 헷갈릴 수 있고, HTML validation 규칙을 위반할 가능성도 있습니다. ```jsx // $ 접두사 사용 시 const Button = styled.button` color: ${props => props.$primary ? 'palevioletred' : 'black'}; `; ``` 위처럼 `$` 접두사를 사용하면 `primary` prop은 styled-components에서만 관리되며 실제 DOM 요소에는 전달되지 않습니다. 따라서 코드가 조금 더 깔끔해집니다. 살펴보시다시피 `$` 접두사의 주된 장점은 사실상 "국내 사용"된 prop들을 실제 DOM 요소에게 전달하지 않아 안전하게 만드는 것입니다. 그러나, 현재로서는 이것이 스타일링에 직접적인 영향을 미치지는 않습니다. 적용 여부는 각 팀이나 개발자의 선택에 따라 달라질 수 있습니다. 이에 대해서 공식 문서를 참조하거나 팀 내에서 코드 리뷰를 통해 결정하는 것이 좋을 것 같습니다.