# [[Transient Props]]

## 📌 Brief Summary
[[Transient Props]]는 `styled-components` 버전 5.1에서 도입된 기능으로, 스타일링만을 위해 사용되는 속성(Prop)이 기본 React 노드나 DOM 요소로 전달 및 렌더링되는 것을 방지합니다 [1]. 속성 이름 앞에 달러 기호(`$`)를 접두사로 붙여서 선언합니다 [1]. 이를 통해 불필요한 커스텀 스타일링 속성이 실제 HTML 요소에 노출되거나 하위 컴포넌트의 동작을 방해하는 것을 안전하게 막을 수 있습니다 [1, 2].

## 📖 Core 기Content
- **작동 원리와 사용법**: 컴포넌트의 스타일을 정의할 때 소비할 목적으로 만들어진 속성에 달러 기호(`$`)를 붙이면(예: `$draggable`, `$customColor`) 해당 속성은 스타일 컴포넌트 내부에서만 처리됩니다 [1, 3]. 예를 들어 일반적인 `draggable` 속성과 달리 `$draggable`은 DOM 요소의 속성으로 렌더링되지 않습니다 [2]. 
- **TypeScript 환경에서의 활용**: TypeScript에서 기본 HTML 태그나 외부 React 컴포넌트에 커스텀 속성을 전달하면 원치 않는 속성이 전송되어 경고나 충돌이 발생할 수 있습니다 [4]. 이때 커스텀 속성에 `$customColor`와 같이 Transient Props를 적용하면, 대상 컴포넌트로 속성이 넘어가는 것을 쉽게 차단할 수 있습니다 [3].
- **v6 버전에서의 필수성**: `styled-components` v6 릴리스에서는 이전 버전에 존재하던 '자동 속성 필터링(automatic prop filtering)' 기능이 완전히 제거되었습니다 [5, 6]. 따라서 현재 하위 컴포넌트나 HTML로 전달되기를 원치 않는 스타일 관련 속성에는 반드시 Transient Props(`$`)를 사용해야 합니다 [5-7].
- **대안 메커니즘 (`shouldForwardProp`)**: 여러 개의 고차 컴포넌트(HOC)를 합성하는 복잡한 상황이나 동적이고 세밀한 속성 필터링이 필요한 경우에는 Transient Props 대신 `shouldForwardProp` 기능을 사용하여 DOM으로 전달될 속성을 직접 제어할 수도 있습니다 [2, 8].

## 🔗 Knowledge Connections
- **Related Topics:** [[styled-components]], [[shouldForwardProp]], [[CSS-in-JS]]
- **Projects/Contexts:** [[React styling]], [[Component API Design]]
- **Contradictions/Notes:** 소스에 따르면 `styled-components` v6부터는 자동 속성 필터링 기능이 제거되었으므로, v6 이상의 환경에서는 DOM 노출을 막기 위해 Transient Props의 사용이 선택이 아닌 필수로 강조됩니다 [5, 6].

---
*Last updated: 2026-04-26*