material-ui-pickers 날짜 선택 컴포넌트가 Safari에서 제대로 작동하지 않는 문제
React 앱을 구축하고 material-ui-pickers Date Picker 컴포넌트를 사용하면서 동시에 Formik 폼과 Yup 유효성 검사를 사용하는 사용자 정의 컴포넌트 안에서 문제가 발생할 수 있습니다. 이 컴포넌트는 다른 브라우저에서는 문제없이 작동하지만 Safari에서 접근할 때 Formik과 Yup 유효성 검사를 이용한 컴포넌트 내부의 오류와 Date Picker 컴포넌트의 내장된 invalidDateMessage 속성도 발생하는 것을 알 수 있습니다.
문제는 material-ui-pickers Date Picker 컴포넌트 자체와 관련이 있는 것으로 보이며, 특히 폼 내의 다른 Material-UI 필드는 모든 브라우저에서 완벽하게 작동하는 것을 고려할 때 그렇습니다.
문제의 원인은 무엇일까요?
비슷한 문제를 검색해 보았을 수도 있지만 찾지 못했을 것입니다. 또한, 날짜를 moment 객체에서 문자열로 변경하여 유효성 검사를 수정하는 등 조정해봐도 문제를 해결할 수 없습니다. 변경 사항을 시도하면서 값을 변경하여 날짜의 문자열 표현을 얻을 수는 있지만, 값을 완전히 제거하면 컴포넌트가 동작하지 않게 되므로 값 처리가 문제가 아닐 수도 있음을 보여주고 있습니다.
해결책과 해결방법
Safari에서 발생하는 Date Picker 컴포넌트의 문제를 해결하기 위해 다음 단계를 수행할 수 있습니다:
1. 종속성 업데이트
다음 종속성의 최신 버전을 사용하고 있는지 확인하세요:
"formik": "^x.x.x","yup": "^x.x.x","@material-ui/core": "^x.x.x","@material-ui/pickers": "^x.x.x",2. Moment 로케일 임포트
프로젝트 요구에 따라 필요한 Moment.js 로케일을 임포트하세요. 특정 로케일을 임포트하거나 필요한 경우 모든 로케일을 임포트할 수 있습니다:
import 'moment/locale/en';import 'moment/locale/es';3. Moment.js 종속성 충돌 해결
프로젝트의 다른 곳에서 Moment.js를 사용하는 경우, Material-UI에서 사용하는 Moment.js와 프로젝트에서 사용하는 Moment.js 사이에 버전 충돌이 없는지 확인하세요. 이러한 충돌은 예기치 않은 오류를 일으킬 수 있습니다. 필요한 경우 Moment.js의 여러 버전을 제거하거나 통합하는 것을 고려하세요.
4. 전체 App 컴포넌트를 Localization Provider로 감싸기
App 컴포넌트 전체를 MuiPickersUtilsProvider로 감싸서 올바른 로컬라이제이션을 보장하세요:
import { MuiPickersUtilsProvider } from '@material-ui/pickers';import MomentUtils from '@date-io/moment';5. Formik 필드를 마운트할 때 다시 초기화해보세요
마운트 시 Formik 필드 값을 빈 문자열로 재설정하여 깨끗한 시작을 보장하세요:
React.useEffect(() => { form.setFieldValue(name, '');}, []);6. 다른 날짜 형식 사용하기
DatePicker 컴포넌트에 전달되는 형식 문자열을 수정하세요. “DD/MM/yyyy” 대신 “MM-DD-YYYY”이나 다른 유효한 날짜 형식 옵션을 시도해보세요:
format="MM-DD-YYYY"format="YYYY/MM/DD"format="MM/DD/YYYY"요구 사항에 가장 적합한 다양한 형식을 실험해보세요.
이러한 단계를 따라가면 Safari에서 특정한 문제를 일으키는 material-ui-pickers Date Picker 컴포넌트의 문제를 해결할 수 있습니다. 이러한 해결책은 많은 개발자들이 비슷한 문제를 해결하고 React 앱이 다른 브라우저에서 원활하게 작동되도록 보장하는 데 도움이 되었습니다.
종속성을 최신 버전으로 유지하고, 가능한 Moment.js 충돌을 처리하고, 올바른 로컬라이제이션을 위해 App 컴포넌트를 MuiPickersUtilsProvider로 감싸는 것을 잊지 마세요. 요구 사항에 맞는 다양한 날짜 형식을 실험해보세요.
희망이 이 문제 해결 가이드가 material-ui-pickers Date Picker 컴포넌트가 Safari에서 마주한 문제를 극복하는 데 도움이 되었기를 바랍니다. 즐거운 코딩하세요!
