React-hook-form, yup, 정규표현식을 사용한 회원정보 입력 오류 처리

기능 구현 중 input에 들어간 value가 없다면 아무런 에러 메시지를 보여주지 않고

input에 value가 있는데 정규표현식에 위배된다면 에러 메시지를 보여주려고 했습니다.

 

처음엔 기존 코드에서 사용되었던 matches()의 내부에서 if문으로 기능을 구현하려 했으나

 matches()의 사용법에 맞지 않아 실패했는데요.

알고보니 matches()는 첫 번째 인자로 정규표현식을, 두 번째 인자로 조건에 따른 텍스트를 넣어주는 것으로 지정되어 있었습니다.

matches(정규표현식 조건, '조건에 맞지 않을 시 노출되는 텍스트')

// 예시 코드

phoneNumber: yup
    .string()
    .matches(REGULAR_EXPRESSION.example, '형식 오류입니다.')
    .required(),

 

이후 .notRequired()를 붙여주었지만

앞의 matches()에 들어있는 정규표현식에 걸려 notRequired()가

동작하지 않았습니다.

// 예시 코드

phoneNumber: yup
    .string()
    .matches(REGULAR_EXPRESSION.example, '형식 오류입니다.')
    .notRequired(),

그래서 발견한 것이 when()이었는데요.

 

when()을 사용해 문제를 해결해보고자 했는데 이번엔 웬걸, 종속성 오류가 발생했습니다.

 

Cyclic dependency, node was:"workPhoneFirstPart 이라는 오류였는데

yup의 when() 메소드를 사용할 때 같은 필드에 대해 의존성을 생성하면 순환 종속성 오류가 발생합니다.
이 경우 'workPhoneFirstPart' 필드가 자기 자신에 의존하고 있어서 문제가 발생하는 것인데요.

 

이 문제를 해결하기 위해서는 when() 메소드 없이 직접 필드 값을 검사하는 방법을 사용할 수 있는데,

아래와 같이 test() 메소드를 사용하여 직접 유효성 검사 로직을 구현할 수 있습니다.

 

Test 메소드를 사용해 해결한 코드

// 예시 코드

phoneNumber: yup
    .string()
    .test('phoneNumber', '형식 오류.', (value) => {
      if (!value || value.length === 0) {
        return true; // 값이 없으면 에러를 반환하지 않음
      } else {
        return REGULAR_EXPRESSION.example.test(value); // 값이 있으면 정규식 검사 수행
      }
    }),

 

결론

yup으로 유효성 검사를 진행할 때, 분기처리를 진행하기 위해선 test()를 사용하면 됩니다.

when은 종속 관련 오류가 발생하기 쉬워 개인적으론 test로 구현하는 것이 좀 더 편하게 다가왔네요.