2nd/00_Raw/Transient Props.md

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