Yup

2020년 02월 27일

Yup

Yup은 Form validation을 위한 라이브러리이다.

Gist of Yup

yup formatted object를 생성 → 우리가 의도한 스키마와 닮아있는 객체를 생성한다.

yup utility function 을 통해 데이터 객체가 이 스키마와 매치되는지 확인한다.

⇒ 이 2가지 과정을 통해 Validation을 진행한다.

A Schema Object

체크아웃 시 주소 입력하는 폼의 데이터 타입을 생각해보자.

// Expected schema from form
// If object does not match this schema,
// it is not valid.
{
  email_address: email <required>,
  full_name: string <required>,
  house_no: int,
  address_1: string <required>,
  address_2: string,
  post_code: string <required>,
  timestamp: date <required>
}

email, date 에서 알 수 있듯이 yup은 해당 값을 검증할 수 있는 메서드를 갖고 있다.

Yup schema object 로 바꿔보자.

const checkoutAddressSchema = yup.object().shape({
  email_address: yup
    .string()
    .email()
    .required(),
  full_name: yup.string().required(),
  house_no: yup
    .number()
    .required()
    .positive()
    .integer(),
  address_1: yup.string().required(),
  address_2: yup.string(),
  post_code: yup.string().required(),
  timestamp: yup.date().default(() => new Date()),
})

Yup schema object는 객체를 유효성 검증하는 데에 책임이 있는 이뮤터블 객체이다. 각 validator에 상응하는 고유의 메서드를 갖고 있으므로, 위에서 보듯이 여러개를 조합하여 원하는 data validation이 가능하다.

string, integer, date, boolean, array, object 와 같은 기본적인 타입과 더불어서 required(also notRequired), email, positive와 같은 것들도 제공한다.

또한 embedded function과 함께 default 값을 정할 수 있다. (eg. timestamp) 이 디폴트 함수 내에는 어떠한 로직이라도 들어갈 수 있고 어떠한 값이라도 리턴될 수 있다.

Validating Objects with My Schema

이제 폼에 맞는 스키마를 만들었고, 이것을 우리가 받은 데이터를 검증하는 데 사용할 수 있다. 아래와 같은 데이터를 제출받았다고 할 때 검증해보자.

let addressFormData = {
  email_address: 'kdy@kdy.com',
  full_name: 'KDY',
  house_no: null,
  address_1: 'My Home',
  post_code: 'AAAAA',
}

Check if the object is valid

yup.isValid() 를 사용한다.
```
const valid = await checkoutAddressSchema.isValid(addressFormData)

// OR

checkoutAddressSchema.isValid(addressFormData).then(function(valid) {
// valid true or false
})
```
isValid() 는 프로미스를 리턴한다. 그래서 어싱크 어웨이트를 사용하거나 콜백 문법을 사용할 수 있다.

Validating the object

yup.validate()

await checkoutAddressSchema.validate(addressFormData)

Casting an Object

yup.cast()

만약 스키마에서 지정한 타입으로 들어오지 않았다면 타입을 캐스팅해서 고칠 수 있다.
```
checkoutAddressSchema.cast(addressFormData)
```

여러가지 useful 메서드들

describe() Yup object로부터 데이터 스키마를 불러낼 수 있다. 이 메서드는 오브젝트 스키마의 디테일을 모은다.
concat() 2개의 스키마를 조합하고 싶을 때는 concat을 쓴다.
abortEarly Yup은 모든 validation을 한꺼번에 진행하고 그것이 모두 끝난 뒤에야 결과를 리턴한다. 만약 첫 번째 에러가 났을 때 바로 그 validate 절차를 멈추고 싶다면 abortEarly를 validate() 메서드의 두번째 인자로 옵셔널하게 넘겨주면 된다.

await checkoutAddressSchema.validate(addressFormData, { abortEarly: true })

trim(), uppercase() , lowercase()
min(), max(), round(), morethan(), lessthan(), truncate()

참고

https://medium.com/@rossbulat/introduction-to-yup-object-validation-in-react-9863af93dc0e