핵심 요약
메타의 StyleX는 CSS-in-JS의 편의성과 정적 CSS의 성능을 결합한 스타일링 시스템으로, 빌드 타임에 스타일을 추출해 충돌 없는 원자 CSS를 생성하고 대규모 코드베이스에서 예측 가능성과 확장을 보장합니다.
주요 특징
- 스타일 컴파일러 기반 빌드 타임 CSS 추출 (Babel 플러그인)
- stylex.create, stylex.props를 통한 정적 해시 기반 원자 클래스 생성
- stylex.defineVars, stylex.defineConsts, stylex.when API 등 공유 토큰과 관계형 스타일 지원
- 성능 개선: 원자 CSS 도입으로 CSS 크기를 대폭 감소(약 80% 축소)
적용 고려사항
- 빌드 도구/번들러와의 긴밀한 통합이 필요
- 정적 값에 의존하는 API 사용 시 일관된 코드 작성 필요
