SVG를 위한 React 컴포넌트 생성: Rust와 SWC 플러그인 개발 경험

카테고리

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

서브카테고리

웹 개발, 개발 툴

대상자

React 및 웹 개발자, Rust와 SWC(스와프) 툴 체인에 관심 있는 개발자

핵심 요약

• swc_plugin_svg_component 플러그인을 통해 SVG를 React 컴포넌트로 변환하는 커스텀 빌드 파이프라인 구축
• Rust 기반 SWC 컴파일러와 WASM 인터페이스를 활용한 고성능 빌드 프로세스 구현
• VisitMut API를 사용하여 class → className, style="..." → 객체, stroke-width → strokeWidth 등 React 스타일 변환 수행

섹션별 세부 요약

1. 개발 배경 및 목표

• SVG를 React 컴포넌트로 변환하는 다른 라이브러리(SVGR 등) 의존 없이 직접 구현
• Rust 언어와 SWC 컴파일러를 활용한 고성능 빌드 솔루션 탐구

2. SWC 및 Rust 생태계 이해

• swc_core 모듈의 AST(추상 구문 트리) 구조 분석 및 Visit/VisitMut API 활용
• Rust의 타입 안전성과 WASM 환경에서의 디버깅 어려움 경험

3. 플러그인 핵심 기능 구현

• SVG 속성 변환 로직:

- class → className

- style="..." → { color: "red" } 형식 객체 생성

- stroke-width → strokeWidth 카멜케이스 변환

• React 컴포넌트 템플릿 생성 및 export default 구조 적용

4. 성능 및 활용 사례

• WASM 기반 SWC CLI를 통한 빠른 빌드 프로세스(성능 향상)
• SVG 아이콘 라이브러리 생성: React 프로젝트에 직접 내장된 컴포넌트로 제공

5. 제한 사항 및 향후 계획

• 현재 React Native 호환성 미비(현재는 Web React만 지원)
• 향후 react-native-svg 호환성 확장 계획(0.2 버전 목표)

결론

• Rust + SWC + WASM 기반 플러그인은 고성능 빌드와 커스텀 변환 로직 구현 가능
• 실험적 구현으로, 실무 적용 전 테스트와 성능 검증 필수
• 프로젝트 링크: https://github.com/joaoneto/swc-plugin-svg-component