antd form 사용시 form.Item props 에는 입력값을 검증해주는 rule 이나 custom validator 를 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<Form.Item
name={'itemCd'}
label="상품코드"
labelAlign="left"
rules={[
{
required: true,
},
{ min: 1, message: '최소 1자 이상 입력해야 합니다.' },
{ max: 20, message: '최대 20자까지 입력이 가능합니다.' },
{
// 아이템코드 중복검사
validator(_, value) {
const itemCds = itemShortLists?.map((el) => el.itemCd);
if ((value !== GetItemsDetailData?.itemCd && itemCds?.includes(value)) || (isNewPost && itemCds?.includes(value))) {
return Promise.reject(new Error('상품코드가 중복됩니다. 다른 코드를 사용하세요.'));
}
return Promise.resolve();
},
},
]}
>
문제점
Form.Item 안에 validator 가 어떤 함수인지 알아보기가 힘들어 함수를 따로 분리하려고 하였다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// isDuplicagtedItemCd.ts
// 함수를 분리하고 , import 해서 쓰려고 했다.
const isDuplicatedItemCd = (value, itemShortLists, isNewPost, GetItemsDetailData) => {
const itemCds = itemShortLists?.map((el) => el.itemCd);
if ((value !== GetItemsDetailData?.itemCd && itemCds?.includes(value)) || (isNewPost && itemCds?.includes(value))) {
return Promise.reject(new Error('상품코드가 중복됩니다. 다른 코드를 사용하세요.'));
}
return Promise.resolve();
};
export default isDuplicatedItemCd;
// Register.tsx
rules={[
{
required: true,
},
{ min: 1, message: '최소 1자 이상 입력해야 합니다.' },
{ max: 20, message: '최대 20자까지 입력이 가능합니다.' },
{
// 아이템코드 중복검사
validator(_, value) {
isDuplicatedItemCd(value, itemShortLists, isNewPost, GetItemsDetailData);
},
},
]}
그런데 문제가 생겼다. 위와 같이 validator 안에 함수를 넣어서 하면, 아래와 같은 오류가 생긴다.
callback is deprecated. please return a promise instead
아니, 있는 함수를 따로 분리만 했는데도 왜? 위와같은 현상이 발생했을까?
해결방법
Form.Item 에 있는 rule 에서 validator 의 경우 return 값이 promise 의 resolve 와 reject 값으로 나온다. callback 이 deprecated 되지 않게 async/await를 써주자.
1
2
3
4
5
6
7
8
9
10
11
12
13
rules={[
{
required: true,
},
{ min: 1, message: '최소 1자 이상 입력해야 합니다.' },
{ max: 20, message: '최대 20자까지 입력이 가능합니다.' },
{
// 아이템코드 중복검사
async validator(_, value) {
await isDuplicatedItemCd(value, itemShortLists, isNewPost, GetItemsDetailData);
},
},
]}
마치며
이후로는 위와같은 오류가 나지 않았다. 해결! 그래도 이상했다. 원래 분리하기전이랑 분리후 컴파일 되었을 때 코드가 똑같을 것이라 생각했는데 아니었다. async await 부분을 더 보아야 겠다. 추후 업데이트 하겠다.
참조
없음.