입력값 validation을 손수 작업하다 보니 소스는 더러워지고 추가는 어려워졌으며 디버깅도 쉽지 않게 되어 버렸다. formik으로 작업하면 간단해진다고 해서 손을 대 봤다. 마침 formik 홈페이지에 mui를 연동한 샘플도 있어서 돌려봤다. 그런데 샘플이 잘 안 돌아간다.
원인은 두 가지.
- material-ui가 리브랜딩 되면서 Import path 같은 것들이 바뀌었는데 그걸 수정해주면 된다.
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';=>import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
2. 오류가 입력되도 helper 메시지가 나타나지 않는데 formik.touched.email, formik.touched.password 조건이 동작하지 않는다. onBlur를 넣어주니 잘 된다.
<TextField
fullWidth
id="email"
name="email"
label="Email"
value={formik.values.email}
onChange={formik.handleChange}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
onBlur={formik.handleBlur}
/><TextField
fullWidth
id="password"
name="password"
label="Password"
type="password"
value={formik.values.password}
onChange={formik.handleChange}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
onBlur={formik.handleBlur}
/>
3. yup.string() 안에 내용을 삭제해야 한다.
const validationSchema = yup.object({
email: yup
.string()
.email('Enter a valid email')
.required('Email is required'),
password: yup
.string()
.min(8, 'Password should be of minimum 8 characters length')
.required('Password is required'),
});# 참조
