MUI 성능 트레이드오프

성능 절충

MUI 시스템은 CSS-in-JS를 사용합니다. Emotion 및 styled-components와 함께 작동합니다.

장점

• 📚 sx prop은 CSS의 상위 집합(superset)을 사용하므로 이미 CSS를 알고 있다면 즉시 친숙하게 느껴질 것입니다. 또한, 약간의 학습을 통해 시간을 절약할 수 있는 (선택적) 약식 정의(shorthand definitions)도 제공합니다. 이는 왼쪽의 기본 탐색 메뉴에 있는 Style utilities 섹션에서 문서화되어 있습니다.
• 📦 시스템은 자동으로 CSS를 정리(purge)하여 페이지에서 사용된 CSS만 클라이언트에 전송합니다. 초기 번들 크기 비용은 고정되어 있으며, 더 많은 CSS 속성을 추가해도 번들 크기는 증가하지 않습니다. 대신 @emotion/react 및 @mui/system 패키지 크기만 지불하면 됩니다. 총 크기는 gzip으로 압축 시 약 15kB입니다. 그러나 이미 MUI Core 컴포넌트 라이브러리(예: Material UI)를 사용 중이라면 추가 오버헤드는 없습니다.

단점

런타임 성능이 저하됩니다.

위의 메트릭스를 재현한 내용은 benchmark 폴더에서 확인할 수 있습니다.

대부분의 사용 사례에서 속도는 충분히 빠르다고 생각되지만, 성능이 중요한 경우 간단한 해결 방법이 있습니다. 예를 들어, 많은 항목을 포함하는 목록을 렌더링할 때, CSS 자식 선택자(child selector)를 사용하여 스타일을 단일 "스타일 삽입 지점"으로 처리할 수 있습니다(랩퍼에는 d를 사용하고 각 항목에는 a를 사용하는 방식).

API 절충

MUI 시스템의 통합된 sx prop은 CSS 유틸리티와 컴포넌트 비즈니스 로직 간의 관심사 분리를 유지하는 데 도움이 됩니다.

예를 들어, 버튼의 color prop은 여러 상태(호버, 포커스 등)에 영향을 미치며 CSS color 속성과는 별개입니다.

이런 이유로 MUI 시스템 속성을 prop으로 받는 컴포넌트는 Box, Stack, Typography, Grid로 제한됩니다. 이러한 컴포넌트는 CSS 문제를 해결하기 위해 설계된 CSS 컴포넌트 유틸리티입니다.