v0.x에서 v1으로 마이그레이션

v0.x에서 v1으로 마이그레이션 (Migration from v0.x to v1)

드디어 v1이 출시됐어요! 2년간의 노력을 활용해 보세요.

출처: 문서

본문

자, v1이 출시되었어요! 2년치의 노력을 활용할 수 있답니다.

FAQ

와우 — API가 완전히 다르네! 1.0은 완전히 다른 건가요? 기본기를 처음부터 다시 배워야 하고, 마이그레이션이 사실상 불가능한가요?

좋은 질문이에요! 대답은 아니오예요. 핵심 개념은 변하지 않았어요. API가 더 많은 유연성을 제공한다는 걸 알게 되실 텐데, 여기에는 대가가 있어요 — 복잡성을 덜 추상화하는 저수준 컴포넌트들이 생기게 되죠.

이렇게 큰 변화가 생긴 계기는 무엇인가요?

Material UI는 4년 전에 시작됐어요. 그 이후로 생태계는 크게 발전했고, 우리도 많은 것을 배웠어요. @nathanmarks가 야심찬 작업을 시작해, 이 지식을 활용해 오래된 문제들을 해결하면서 Material UI를 처음부터 다시 구축했어요. 주요 변경 사항 몇 가지를 꼽자면:

CSS-in-JS를 사용하는 새로운 스타일링 솔루션 (더 나은 커스터마이즈 파워, 더 나은 성능)
새로운 테마 처리 (중첩, 자립형 등)
Next.js 덕분에 눈부시게 빠른 문서
훨씬 나아진 테스트 커버리지 (99%+, 모든 주요 브라우저에서 실행, 시각 회귀 테스트)
완전한 서버 사이드 렌더링 지원
광범위한 지원 브라우저

마이그레이션은 어디서 시작해야 하나요?

먼저 v0.x 버전 옆에 Material UI의 v1.x 버전을 설치하세요.

yarn 사용 시:

yarn add material-ui
yarn add @material-ui/core

또는 npm 사용 시:

npm install material-ui
npm install @material-ui/core

그 다음:

import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from '@material-ui/core/Button'; // v1.x

프로젝트에서 마이그레이션 헬퍼를 실행하세요.
v1.x에서는 MuiThemeProvider가 선택 사항이지만, 커스텀 테마가 있다면 다음과 같이 v0.x와 v1.x 버전의 컴포넌트를 동시에 마음껏 사용할 수 있어요:

import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({/* theme for v1.x */});
const themeV0 = getMuiTheme({/* theme for v0.x */});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>
    </MuiThemeProvider>
  );
}

export default App;

그 다음에는 컴포넌트 인스턴스를 한 번에 하나씩 마이그레이션하면 돼요.

컴포넌트 (Components)

Autocomplete

Material UI는 이 문제를 해결할 고수준 API를 제공하지 않아요. React 커뮤니티가 구축한 솔루션들을 탐색해 보시길 권장해요.

향후에는 간단한 사용 사례를 해결할 간단한 컴포넌트를 제공하는 방안을 검토할 거예요: #9997.

Svg Icon

프로젝트에서 마이그레이션 헬퍼를 실행하세요.

그러면 다음과 같은 변경이 적용될 거예요:

-import AddIcon from 'material-ui/svg-icons/Add';
+import AddIcon from '@mui/icons-material/Add';

 <AddIcon />

Flat Button

-import FlatButton from 'material-ui/FlatButton';
+import Button from '@material-ui/core/Button';

-<FlatButton />
+<Button />

Raised Button

RaisedButton 업그레이드 경로:

-import RaisedButton from 'material-ui/RaisedButton';
+import Button from '@material-ui/core/Button';

-<RaisedButton />
+<Button variant="contained" />

Subheader

-import Subheader from 'material-ui/Subheader';
+import ListSubheader from '@material-ui/core/ListSubheader';

-<Subheader>Sub Heading</Subheader>
+<ListSubheader>Sub Heading</ListSubheader>

Toggle

-import Toggle from 'material-ui/Toggle';
+import Switch from '@material-ui/core/Switch';

-<Toggle
-  toggled={this.state.checkedA}
-  onToggle={this.handleToggle}
-/>
+<Switch
+  checked={this.state.checkedA}
+  onChange={this.handleSwitch}
+/>

-import MenuItem from 'material-ui/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';

-<MenuItem primaryText="Profile" />
+<MenuItem>Profile</MenuItem>

Font Icon

-import FontIcon from 'material-ui/FontIcon';
+import Icon from '@material-ui/core/Icon';

-<FontIcon>home</FontIcon>
+<Icon>home</Icon>

Circular Progress

-import CircularProgress from 'material-ui/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';

-<CircularProgress mode="indeterminate" />
+<CircularProgress variant="indeterminate" />

-import DropDownMenu from 'material-ui/DropDownMenu';
+import Select from '@material-ui/core/Select';

-<DropDownMenu></DropDownMenu>
+<Select value={this.state.value}></Select>

v0.x에서 v1으로 마이그레이션