React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 1/2

옛날 옛적,,, 프로젝트를 다시 꺼내서 작업하려 보니 MUI 4 버전을 사용하고 있다
스토리북에서 쓰는 MUI가 5버전이다보니,,, 버전 업그레이드가 필요한 상황~~

 

MUI 문서를 뒤져보면 친절하게 스텝 바이 스텝 설명되어 있다

Migrating to v5: getting started - Material UI

 v4에서 v5로 업그레이드 되면서 가장 큰 변화는 JSS기반에서 emotion(CSS-in-js)으로 대체되었다는 것~
(One of the biggest changes in v5 is the replacement of JSS for Emotion as a default styling solution.)

그리고 v5는 리액트 18 버전을 완전히~ 지원하기 때문에 리액트 18 버전의 장점을 사용하기 위해서 MUI 5 버전을 사용해야 된다
( v5 is the only version that fully supports React 18)

 

Step 1) 리액트 버전 업그레이드

현재 프로젝트가 리액트 17 버전 이하이거나 mui(@material-ui)의 버전이 4.11.2 이하 일 때 패키지 업그레이드가 필요하다!

With npm:

npm update @material-ui/core@^4.11.2 react@^17.0.0

With yarn:

yarn upgrade @material-ui/core@^4.11.2 react@^17.0.0

 

Step 2)  ThemeProvide 세팅

기존에 MUI를 사용하고 있었다면 거의 대부분 세팅되어 있을 테지만
다시 확인합시다

import { ThemeProvider, createMuiTheme, makeStyles } from '@material-ui/core/styles';

const theme = createMuiTheme();

const useStyles = makeStyles((theme) => {
  root: {
    // some CSS that accesses the theme
  }
});

function App() {
  const classes = useStyles(); // ❌ If you have this, consider moving it
  // inside of a component wrapped with <ThemeProvider />
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

우리 팀 프로젝트의 경우 ThemeProvider가 @material-ui/styles에서 import 되고 있어서
가이드 대로 material-ui/core/stlyes에서 다시 import 해왔다

 

*Styled-components 를 사용중이라면?

  <StylesProvider injectFirst>
        <ThemeProvider theme={theme}>
        //...code
        </ThemeProvider>
  </StylesProvider>

이런식으로 StylesProvider가 @material-ui/core에서 import 되고 있을텐데
v5에서는 @mui/styles에서 import 해와야 된다

 

Step 3) MUI 패키지 업데이트하기

npm install @mui/material @mui/styles // npm
yarn add @mui/material @mui/styles // yarn

 

mui에서 제공하는 lab이나 icon을 사용 중이라면 이것도 다시 install 해야 된다

- mui/lab

npm install @mui/lab // npm
yarn add @mui/lab // yarn

- mui/icons

npm install @mui/icons-material // npm
yarn add @mui/icons-material // yarn

 

emotion을 사용하려면 emotion 관련 패키지 설치도 필요하다

yarn add @emotion/react @emotion/styled

 

* Styled-components를 사용할 거라면 아래 패키지를 다시 한번 설치해 주고~

yarn add @mui/styled-engine-sc styled-components

 

package.json을 아래와 같이 변경해 준다

 {
   "dependencies": {
-    "@mui/styled-engine": "latest" <- X
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" // <- 이렇게!
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" // <- 추가
+  },
 }

 

Step 4) import 경로 변경하기

@material-ui/core -> @mui/material
@material-ui/unstyled -> @mui/base
@material-ui/icons -> @mui/icons-material
@material-ui/styles -> @mui/styles
@material-ui/system -> @mui/system
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
@material-ui/docs -> @mui/docs
@material-ui/envinfo -> @mui/envinfo

ctrl + F로 하나하나 찾아서 변경해 줬다
한 번에 다 변경하는 방법도 있지만 어디서 어떤 에러가 나는지 파악을 하기 위해 노가다 작업을 함,,,

나 같은 경우 App.js에 있는 import부터 수정하고 styles->core 순으로 변경했다

 

Step 5)  v4 패키지 삭제하기

@material-ui로 검색해서 더 이상 사용하는 곳이 없는 걸 확인한 후 패키지 remove를 해주었다

yarn remove @material-ui/*

 

---

복잡하지 않은  프로젝트의 경우 위 5 스텝으로 쉽게 마이그레이션 가능했지만
복잡하지 않은 프로젝트가 존재하는가,,,ㅎ? 있다면 나도 알고 싶음 

총 6개 프로젝트 중에 이제 한 프로젝트만 MUI버전 업그레이드를 완료했고
내일 나머지 5개 프로젝트를 진행해야 된다,,, 시간 없음 ~~ ㅠ

업그레이드가 smooth 하게 진행되면 다행이지만 보통 그러지 않음,,,
내일 또다시 업그레이드 진행을 해야 되고 또 여러 이슈를 마주 할 테니,,,

그땐 꿀팁(?)이나 주의할 점,, 정리해서 올려볼게요