styled-components가 런타임에 css를 주입하는 방법

간단 소개

styled-components는 런타임에 CSS를 주입하여 스타일링하는 CSS-in-JS 라이브러리로, 컴포넌트 생성부터 스타일 주입까지의 핵심 동작 과정을 분석한다.

AI Summary

styled-components 동작 원리
- styled-components는 CSS-in-JS 라이브러리로, 런타임에 CSS를 주입하여 스타일링을 처리한다.
- styled 함수 호출 시 HTML 태그나 React 엘리먼트를 기반으로 스타일링된 컴포넌트를 생성한다.
- constructWithOptions 함수는 컴포넌트 생성 시 사용자 정의 스타일과 인터폴레이션을 처리한다.
스타일 속성 결정 및 주입
- useStyledComponentImpl 훅은 스타일링된 컴포넌트에 스타일, 테마, 속성을 전달하고 스타일 규칙을 동적으로 주입한다.
- useInjectedStyle 훅은 컴포넌트의 스타일을 동적으로 생성하고 스타일 시트에 삽입하는 과정을 처리한다.
- ComponentStyle 클래스는 스타일 규칙을 관리하고 CSS 문자열을 생성하여 DOM 요소에 반영한다.
핵심 과정
- styled 함수 -> constructWithOptions 함수 -> createStyledComponent 함수 -> useStyledComponentImpl 훅 -> useInjectedStyle 훅 순으로 진행된다.
- useContext를 통해 테마 컨텍스트를 가져오고, determineTheme 함수로 테마를 결정한다.
- resolveContext 함수는 컴포넌트 속성, 테마, .attrs()를 통해 정의된 속성을 결합하여 최종 컨텍스트를 생성한다.