Migration from @material-ui/pickers

Migration from @material-ui/pickers (@material-ui/pickers에서 마이그레이션)

기존 @material-ui/pickers 패키지가 @mui/lab으로 옮겨졌을 때, 그 변경 사항을 이해하고 코드를 갱신하는 방법을 안내합니다.

출처: 문서

본문

@material-ui/pickers가 @mui/lab으로 옮겨졌습니다.

:::success 이 마이그레이션 가이드는 @mui/lab에서 Date/Time picker를 사용해야 하는 경우에만 쓸 수 있어요.

이 컴포넌트들은 v5.0.0-alpha.30부터 v5.0.0-alpha.89까지의 lab에서 alpha 버전으로 제공되었습니다. 이들은 더 이상 새로운 기능이나 버그 수정을 받지 않으며, 앞으로의 Material UI 메이저 릴리스와도 호환되지 않아요.

이 컴포넌트들의 안정 버전을 쓰고 싶다면 새 MUI X 패키지 @mui/x-date-pickers와 @mui/x-date-pickers-pro를 살펴보세요.

@mui/lab에서 @mui/x-date-pickers로 옮길 때는 전용 마이그레이션 가이드를 따라가면 됩니다. :::

:::warning Date picker 컴포넌트들은 재작성되었어요. 대부분의 로직이 처음부터 다시 쓰였기 때문에, 변경 사항 전체 목록을 유지하는 것은 불가능합니다. 여기서는 바뀐 가장 중요한 개념들을 개괄해 드릴게요. 업그레이드하려면 코드베이스에서 picker를 쓰는 곳을 하나씩 돌아가며 다시 쓰는 게 가장 쉬운 방법일 수 있어요. 각각을 수정한 뒤에는 테스트를 꼭 돌리는 것을 잊지 마세요! :::

이 가이드는 v3.2.10의 pickers에서 바뀐 핵심 개념들을 개괄합니다.

설치 (Installation)

@mui/lab 패키지가 아직 설치되어 있지 않다면 설치해야 합니다. ⚠️ v5.0.0-alpha.30부터 v5.0.0-alpha.89까지(양쪽 포함)의 버전을 설치했는지 확인하세요.

:::warning v5.0.0-alpha.90부터는 pickers가 더 이상 @mui/lab에서 제공되지 않습니다. 최신 pickers 컴포넌트를 사용하려면 페이지 상단의 정보를 참고하세요. :::

Imports

pickers의 keyboard 버전은 더 이상 배포되지 않습니다. 모바일과 데스크톱 picker의 모든 버전이 접근성을 위해 키보드 입력을 구현합니다.

-import { KeyboardDatePicker } from '@material-ui/pickers';
+import DatePicker from '@mui/lab/DatePicker';

-<KeyboardDatePicker />
+<DatePicker />

또한 variant prop을 제공하는 대신, 이들은 서로 다른 import로 옮겨졌습니다. 즉 데스크톱 picker만 사용한다면 번들에 Dialog가 포함되지 않는다는 뜻이에요.

<DesktopDatePicker /> – 데스크톱 전용 뷰.
<MobileDatePicker /> – 모바일 전용 뷰.
<DatePicker /> – 사용자의 pointer 선호도에 따라 모바일 또는 데스크톱 뷰.
<StaticDatePicker /> – input이나 다른 래퍼 없이 picker 뷰 자체만.

-import { DatePicker } from '@material-ui/pickers';
+import DesktopDatePicker from '@mui/lab/DesktopDatePicker';

-<DatePicker variant="inline" />
+<DesktopDatePicker />

같은 규칙이 TimePicker에도 적용됩니다 – <DesktopTimePicker>와 <MobileTimePicker /> 같은 식이죠.

MuiPickersUtilsProvider

MuiPickersUtilsProvider는 LocalizationProvider로 대체되었습니다. 또한 pickers는 date-io 어댑터를 직접 설치할 필요가 없어요. 모든 것이 lab에 포함되어 있습니다.

❌ Before:

import AdapterDateFns from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';

✅ After:

import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';


function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      ...
    </LocalizationProvider>
  )
);

Render input

새로운 필수 renderInput prop을 도입했습니다. 이 prop은 Material UI가 아닌 텍스트 필드 input 컴포넌트도 쉽게 사용할 수 있게 해줍니다.

<DatePicker renderInput={(props) => <TextField {...props} />} />
<TimePicker renderInput={(props) => <TextField {...props} />} />

이전에는 props가 <TextField /> 컴포넌트에 전개(spread)되었습니다. 이제부터는 이를 제공하기 위해 새 renderInput prop을 사용해야 합니다.

 <DatePicker
-  label="Date"
-  helperText="Something"
+  renderInput={props => <TextField label="Date" helperText="Something" /> }
 />

State management

pickers의 state/value 관리 로직은 처음부터 다시 작성되었습니다. 이제 pickers는 date picker의 각 뷰가 끝날 때마다 onChange prop을 호출합니다. onError 핸들러도 완전히 달라졌어요. 폼 통합과 관련된 문제는 미묘할 수 있으니, pickers를 폼과 통합할 때는 세 번 확인하세요.

필수 mask 없음 (No required mask)

mask는 더 이상 필수가 아닙니다. 또한 제공한 mask가 유효하지 않으면 pickers는 그냥 mask를 무시하고 임의의 입력을 허용합니다.

<DatePicker
  mask="mm"
  value={new Date()}
  onChange={console.log}
  renderInput={(props) => (
    <TextField {...props} helperText="invalid mask" />
  )}
/>

<DatePicker
  value={new Date()}
  onChange={console.log}
  renderInput={(props) => (
    <TextField {...props} helperText="valid mask" />
  )}
/>

그리고 더 많은 것들 (And many more)

 <DatePicker
-  format="DD-MM-YYYY"
+  inputFormat="DD-MM-YYYY"

변경 사항이 많으니 주의하세요. 테스트와 빌드가 통과하는지 꼭 확인하세요. date picker를 고급으로 사용하고 있다면 다시 작성하는 쪽이 더 간단할 가능성이 높아요.

:::success picker 컴포넌트 재작성을 고려하고 있다면, 최신 MUI X 패키지 사용을 고려해 보세요. :::

가이드를 개선할 기회를 발견하면 이 문서를 개선하는 풀 리퀘스트를 열어 주세요.

Migration from @material-ui/pickers