React를 위한 CSS-in-JS 라이브러리. 일본의 poteboy가 개발했다.

기존의 런타임 형식이었던 CSS-in-JS 라이브러리(예: styled-components, emotion)의 단점을 해결하고 컴파일 형식의 CSS-in-JS 라이브러리의 장점을 가져와 만든 라이브러리다.

하이브리드 접근법

기존의 런타임 형식 CSS-in-JS 라이브러리는 런타임에서 DOM에 스타일을 주입해야 했기 때문에 유연했던 대신 성능 문제가 있다. 이를 해결하기 위해 등장했던 컴파일 형식 라이브러리는 빌드 시에 JS로 작성된 스타일을 CSS로 변환하여 성능 문제를 해결했지만, 기존에 런타임 형식 라이브러리가 가지던 유연한 스타일 변경에 제약이 생긴다.

Kuma UI는 두 방식을 섞어 빌드 시에 스타일을 컴파일하고, 동적으로 변동될 수 있는 스타일은 더티 체킹을 수행 해 런타임에서 주입하는 방식으로 동작한다.

Rust based Compiler

2024년 5월에 기본 Babel로 작성되어 있던 플러그인을 Oxc를 이용한 Rust 기반으로 재작성하여, wasm 형태로 1.2.0 버전부터 이용할 수 있다. GitHub PR

wasm 활성화 방법은 설정에 wasm 옵션을 활성화하면 된다.

new KumaUIWebpackPlugin({
  wasm: true
}),

@kuma-ui의 webpack-plugin를 참고해보면, wasm 옵션의 처리 방식을 확인할 수 있다.

여담

• 프로덕션에서 사용하기에 불안정하다. stable 버전 사용 시에도 개발 환경에서 문제가 생기기도 한다.

• 이 위키도 사용 중이다.

• 개발자가 v2에 대한 계획을 Discussion에 공지했다. #

출처

• https://www.kuma-ui.com/docs#the-hybrid-approach