styled-components에서 $ prefix로 커스텀 prop 다루기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *React + styled-components 개발자**
• 난이도: 초급~중급 (커스텀 prop 사용 경험이 있는 개발자에게 유용)

핵심 요약

• $ prefix를 사용하면 커스텀 prop이 DOM으로 전달되지 않아 React 경고를 방지
• boolean, string, number 등 모든 타입의 커스텀 prop에 $ prefix 적용 가능
• 카멜케이스(isSelected)는 DOM 전달 X, 소문자(isselected)는 custom attribute로 간주되어 경고 발생

섹션별 세부 요약

1. 커스텀 prop 전달 시 발생하는 문제

• 카멜케이스(isSelected): React가 인식하지 못하는 prop 경고 발생
• 소문자(isselected): boolean 값 전달 시 "boolean attribute" 경고 발생
• string, number, object 등 다른 타입도 비슷한 문제 발생 가능

2. `$` prefix를 통한 해결 방법

• $isSelected, $variant 등 $ prefix 붙이면 DOM 전달 X, 스타일 계산만 수행
• 예시 코드:

```tsx

```

• 스타일 적용 시 $ prefix 사용 필수:

```css

background-color: ${({ $isSelected, theme }) => ...};

```

3. `$` prefix의 장점 및 활용 가능성

• 모든 커스텀 prop(예: $fooBar, $isselected)에 적용 가능
• React의 DOM 전달 규칙을 우회하여 경고 예방
• string, number, object 등 타입에 관계없이 안전하게 사용 가능

결론

• $ prefix 사용을 통해 styled-components의 커스텀 prop 경고를 완전히 방지
• 모든 커스텀 prop에 $ prefix 적용하여 DOM 전달을 명시적으로 제어
• React와 styled-components의 협업 규칙을 준수하면서도 유연한 스타일링 가능