[React Hook Form] Yup을 활용한 조건부 유효성 검사

폼을 작성할 때, 여러 가지 조건이 발생하는 경우가 있습니다. 특정 값을 선택했을 때만 입력 필드가 나타나야 하거나, 특정 값이 선택되었을 때는 필수 입력 필드가 되지만 다른 값이면 필수가 아닌 등 다양한 상황이 발생할 수 있습니다. 이런 상황에서 Yup의 when 메서드를 사용하면 원하는 조건에 따라 유효성 검사를 동적으로 설정할 수 있습니다.

 

공식문서의 예시코드를 가져와 when의 사용법에 대해 설명하겠습니다. when의 타입은 아래와 같이 정의되어 있습니다.

Schema.when(keys: string | string[],
  builder: object | (values: any[], schema) => Schema): Schema

when 메서드는 두 개의 매개변수를 사용하며, 첫 번째 매개변수는 비교할 기준의 키 값으로 문자열 또는 문자열 배열을 사용합니다. 두 번째 매개변수는 해당 기준에 따라 동적으로 설정할 객체 또는 스키마를 반환하는 함수입니다.

 

const schema = object({
  isBig: boolean(),
  count: number()
    .when('isBig', {
      is: true, // (value) => value === true
      then: (schema) => schema.min(5),
      otherwise: (schema) => schema.min(0),
    })
    .when('$other', ([other], schema) =>
      other === 4 ? schema.max(6) : schema,
    ),
});

위의 코드를 확인해 보겠습니다. 첫 번째 인수는 비교 조건에 사용될 값에 해당하는 키를 나타내며, 이는 스키마 내부에 존재하는 키 값을 사용합니다. 두 번째 인수에 사용하는 객체는 is, then, otherwise의 키를 가지고 있습니다. 여기서 is는 비교를 위한 boolean값 또는 boolean값을 반환하는 함수를 사용할 수 있습니다.

 

예를 들어, is에 true를 사용하게 되면, (value) => value === true와 동일한 조건을 나타냅니다. 이는 해당 키의 값이 true일 때 동적으로 설정된 규칙이 적용되는 것을 의미합니다.

const schema = object({
  isSpecial: boolean(),
  isBig: boolean(),
  count: number().when(['isBig', 'isSpecial'], {
    is: true, // (isBig, isSpecial) => isBig && isSpecial
    then: (schema) => schema.min(5),
    otherwise: (schema) => schema.min(0),
  }),
});

또 다른 예시코드를 가져왔습니다. 위의 코드를 확인해 보겠습니다. 첫 번째 인수에는 해당 스키마에 존재하는 여러 키를 담은 문자열 배열을 사용하고 있습니다. 이는 isBig와 isSpecial 두 키 값을 기준으로 사용되고 있습니다. 첫 번째 인수에 문자열 배열을 사용했으므로, isBig와 isSpecial이 모두 true일 때를 의미합니다. 주석의 예시 코드를 보면 함수를 사용하는 경우, 인수의 개수가 늘어남을 확인할 수 있습니다. 문자열 배열의 원소 순서와 함수의 인수의 순서가 동일하다는 점을 파악할 수 있습니다. 이처럼 is에 함수 타입을 사용하면 더욱 세밀한 조건을 만들 수 있습니다.

const schema = yup.object({
  isBig: yup.boolean(),
  count: yup.number().when('isBig', ([isBig], schema) => {
    return isBig ? schema.min(5) : schema.min(0);
  }),
});

 

위의 마지막 예시코드를 확인해보겠습니다. 첫 번째 인수에는 문자열이, 두 번째 인수에는 함수를 사용하고 있습니다. 이전의 예시 코드와 다른 점은 두 번째 인수로 스키마를 반환하는 함수를 사용하고 있다는 것입니다. 이 함수의 첫 번째 인수는 any 타입의 배열로, when의 첫 번째 인수가 문자열 배열이므로 동일한 길이가 될 것으로 예상됩니다.

두 번째 인수의 스키마는 현재 사용하고 있는 스키마를 나타냅니다. 만약 isBig이 true라면 count의 최소값은 5가 되고, false라면 0이 됩니다.

 

폼 작성 시 조건부 유효성 검사를 위해 Yup의 when 메서드를 활용할 때, 첫 번째 인수는 문자열 또는 문자열 배열로 특정 키 값을 나타내며, 두 번째 인수는 객체 또는 스키마를 반환하는 함수를 사용할 수 있습니다.
첫 번째 인수에서 사용된 키 값들은 두 번째 인수에서 모두 활용 가능하며, 두 번째 인수가 객체 타입이라면 is 키를 통해 접근할 수 있습니다. 반면 함수 타입이라면 해당 함수의 첫 번째 인수에서 any 타입의 배열로 키 값을 받아올 수 있습니다.
이렇게 조합하여 when 메서드를 활용하면 특정 조건에 따라 동적으로 유효성 검사 규칙을 설정할 수 있습니다. 이를 통해 폼 유효성 검사를 더욱 세밀하게 조작할 수 있게 됩니다.

 

---

실무에서 다양한 조건을 활용하여 유효성 검사 로직을 작성하는 과정에서 Yup을 조건부로 효과적으로 활용하는 방법에 대한 글을 작성하려고 했습니다. 초기에는 어려운 로직을 간단하게 설명하는 글을 작성하고자 했으나, 블로그 글을 쓰면서 어떤 예시 코드를 사용해야 할지 막막한 상황이었습니다. 결국 이번에 작성한 글에서처럼 Yup 공식 문서에 나와있는 예시 코드를 참고하여 기본적인 내용을 설명해 보았습니다.

글을 작성하면서 초기 의도와는 다르게 기본적인 내용에 집중하게 되었지만, 해당 기능을 이해하고 설명할 수 있다는 점에서 만족스러운 부분도 있습니다. 그러나 설명에 오류가 있다면 댓글로 알려주시면 감사하겠습니다.