Material UI v4에서 v5로 마이그레이션
Material UI v4에서 v5로 마이그레이션 (Migrating from Material UI v4 to v5)
info
출처: 문서
본문
info
우리는 Backstage를 위한 New Design System에 관한 앞으로의 방향을 결정하는 중이며, 현재로서는 이것이 확정될 때까지 MUI v5로의 마이그레이션을 잠시 보류할 것을 권장합니다. 자세한 내용은 "RFC: New design system for Backstage"에서 확인할 수 있습니다.
Backstage는 Material UI v5를 사용해 새 플러그인이나 구성 요소를 개발하는 것을 지원합니다. 동시에 애플리케이션의 많은 부분과 기존 플러그인은 여전히 Material UI v4를 사용할 것입니다. Material UI v4와 v5를 동시에 지원하기 위해 우리는 UnifiedTheme이라는 새 개념을 도입했습니다. UnifiedTheme의 목표는 두 버전을 병렬로 실행하고, 테마 옵션을 유사하게 적용하며, Material UI의 잠재적인 향후 버전을 지원함으로써 점진적 마이그레이션을 가능하게 하는 것입니다.
기본적으로 UnifiedThemeProvider가 이미 사용됩니다. createApp 함수에 사용자 지정 테마를 추가한다면 Material UI ThemeProvider를 UnifiedThemeProvider로 교체해야 합니다.
+ import import {+ UnifiedThemeProvider,+ themes as builtinThemes,+ } from '@backstage/theme'; const app = createApp({ // ... themes: [ { // ... Provider: ({ children }) => (- <ThemeProvider theme={lightTheme}>.- <CssBaseline>{children}</CssBaseline>.- </ThemeProvider+ <UnifiedThemeProvider theme={builtinThemes.light} children={children} /> ), } ] });
Backstage 인스턴스에 구체적인 변경을 하기 전에 Material UI가 제공하는 Migration Guide를 먼저 살펴보는 것이 도움이 될 수 있습니다. v4와 v5의 차이를 설명하며 Backstage 인스턴스와 플러그인에 미치는 영향을 이해하기 쉬워집니다.
우리가 여전히 @mui/styles와 jss를 사용한다는 점에 주목할 가치가 있습니다. makeStyles 또는 withStyles를 사용할 때 emotion으로 마이그레이션하는 문서를 발견할 수도 있습니다. emotion으로 전환할 필요는 없습니다.
기억해야 할 중요한 것은 Material UI v5가 React 버전 17 이상과 함께 사용하도록 의도되었다는 것입니다. 즉 플러그인에서 Material UI v5 구성 요소를 사용하려면 해당 플러그인의 React 버전을 최소 17로 강제해야 합니다.
... "peerDependencies": { "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", "react-router-dom": "6.0.0-beta.0 || ^6.3.0" },...
Material UI 권장 사항을 준수하기 위해 우리는 명명된 임포트보다 표준 임포트를 선호하는 새 린트 규칙을 적용하고, 3단계 임포트를 비공개로 간주하여 제한합니다 (Guide: Minimizing Bundle Size).
Backstage *-react 플러그인에서 내보낸 core-components 및 구성 요소에는 Material UI v4로 작성된 것들이 있어서 props로 Material UI 구성 요소를 기대합니다. 이러한 경우에는 여전히 Material UI v4를 사용해야 합니다.
Material UI v5 마이그레이션의 현재 알려진 문제는 우리의 Milestone on GitHub에서 확인하세요. 다른 문제가 발생하면 새 이슈를 열어 주세요.
플러그인 (Plugins)
플러그인을 Material UI v5로 마이그레이션하려면 사용 가능한 리소스를 활용할 수 있습니다.
- 번들 크기 최소화를 위한 새 린트 규칙에 맞게 임포트를 명명된 임포트에서 기본 임포트로 수동으로 수정합니다. 참고: 새
@backstage/no-top-level-material-ui-4-importsESLint 규칙을 사용하면 도움이 됩니다. - 특정 플러그인 경로에 대한 마이그레이션
codemod실행:npx @mui/codemod v5.0.0/preset-safe plugins/<path>. codemod이 고치지 못한 가능한TODO:항목을 살펴봅니다.@backstage/theme에서@deprecated로 표시된 타입과 메서드를 제거합니다.- peer 의존성으로
"react": "^17.0.0"(또는 더 최신)을 사용하고 있는지 확인합니다.
GraphiQL 플러그인의 마이그레이션을 플러그인 마이그레이션의 예시로 따라갈 수 있습니다.