i18n 문제로 Yup이 제대로 작동하지 않습니다.
국제화 (i18n)를 적용할 때 yup 유효성 검사 라이브러리에서 몇 가지 도전에 직면할 수 있습니다. 이 블로그 포스트에서는 발생할 수 있는 문제와 해결 방법을 알아보겠습니다.
문제: 오류 메시지와 i18n
사용자의 로캘을 기반으로 에러 메시지를 추가하고자 할 때 yup을 사용하는 시나리오를 생각해보겠습니다. 다음은 코드 스니펫 예시입니다:
const schema = yup.object().shape({
email: yup
.string()
.email(i18n.t('login.emailSpellError'))
.required(i18n.t('login.emailRequiredError')),
password: yup
.string()
.matches(/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})$/i, i18n.t('login.passSpellError'))
.required(i18n.t('login.passRequiredError')),
});
이 경우, yup 메소드 내에서 직접 i18n 함수 (i18n.t())를 사용할 때 번역에 문제가 발생할 수 있습니다. 번역이 예상대로 작동하지 않아 번역이 빠지거나 잘못된 오류 메시지가 나타날 수 있습니다.
가능한 해결책
해결책 1: 번역을 렌더 메소드로 이동
효과적인 해결책은 스키마 코드를 수정하는 것입니다. yup 메소드의 i18n.t() 호출을 해당 번역 키로 대체합니다. 다음과 같이 수정합니다:
.email('login.emailSpellError')
.required('login.emailRequiredError')
그런 다음 렌더 메소드에서 번역 함수를 사용하여 적절한 오류 메시지를 검색하고 표시합니다:
{t(`form.errors.${form.errors.email}`)}번역 파일에 다음과 같은 필요한 항목들이 포함되어 있는지 확인하세요:
"form": {
"errors": {
"login": {
"emailSpellError": "이메일이 유효하지 않습니다.",
"emailRequiredError": "이메일은 필수 항목입니다."
}
}
}
번역 함수를 렌더 메소드로 이동시킴으로써 번역이 올바른 위치에서 이루어지고 yup이 번역을 인식할 수 없는 문제를 수정할 수 있습니다.
해결책 2: 커스텀 훅 내에서 번역 수행
다른 접근 방식은 동적으로 계산되는 번역을 반환하는 함수를 생성하는 것입니다:
// 번역 파일
{
"validation.invalid-email": "이메일이 유효하지 않습니다.",
"validation.field-required": "필드는 필수 항목입니다."
}
// 유효성 검사 스키마
const forgotPasswordSchema = () => {
return yup.object().shape({
email: yup
.string()
.email(i18n.t('validation.invalid-email'))
.required(i18n.t('validation.field-required')),
});
};
// 컴포넌트
const FormComponent = () => {
const schema = useMemo(() => forgotPasswordSchema(), [i18n.language]);
return <>...</>;
}
이 해결책은 유효성 검사 메시지의 번역이 항상 최신이 되고, 메시지의 원본에서 번역이 이루어진다는 것을 보장합니다.
해결책 3: Yup 유효성 검사를 위한 커스텀 훅 사용
커스텀 훅을 활용하여 유효성 검사 스키마와 오류 메시지를 더 효율적으로 처리할 수도 있습니다:
// 앱 언어 변경 시 스키마 내의 오류 메시지 갱신
import { yupResolver } from '@hookform/resolvers/yup';
import { useRouter } from 'next/router';
import { useMemo } from 'react';
const useSchema = (getSchema) => {
const { locale } = useRouter();
const resolver = useMemo(getSchema, [locale]);
return yupResolver(resolver);
};
export default useSchema;
// 전역 지역화된 오류 메시지 설정
import { useTranslation } from 'react-i18next';
import { setLocale } from 'yup';
export const useLocalisedYupSchema = () => {
const { t } = useTranslation('common');
setLocale({
mixed: {
required: t('validation.required')
},
string: {
min: ({ min }) => t('validation.min', { min }),
max: ({ max }) => t('validation.max', { max })
},
});
};
이러한 커스텀 훅을 사용하면 오류 메시지와 유효성 검사 스키마를 더 효율적으로 처리하고, 사용자의 기본 언어에 따라 번역된 메시지를 제공할 수 있습니다.
결론
yup에서 i18n으로 오류 메시지를 국제화하는 것은 복잡한 작업일 수 있습니다. 그러나 이 블로그 포스트에서 제공하는 해결책을 따르면 이러한 도전을 극복하고 다른 로캘에 맞게 오류 메시지가 제대로 번역되도록 할 수 있습니다. 프로젝트 요구사항에 가장 적합한 해결책을 선택하고 yup을 사용하여 무난한 i18n을 즐기세요.
