Yup에서 nullable / notRequired / optional 구분해서 사용하기

9rganizedChaos·2024년 5월 2일
0

Yup 사용할 때, nullable, notRequired, optional 무분별하게 사용할 수 있는데, 각각의 메소드에 따라서, yup으로 생성한 스키마의 타입이 조금씩 달라진다.

1) nullable

      birthDate: yup.string().nullable()

// 아래와 같이 타입 추론됨
// birthDate?: string | null | undefined;

2) notRequired

      birthDate: yup.string().notRequired()

// 아래와 같이 타입 추론됨
// birthDate?: yup.Maybe<string | undefined>;

// 참고로 yup에서 정의해놓은 Maybe 타입은 아래와 같다.
// type Maybe<T> = T | null | undefined;
// 즉, nullable과 추론타입은 같다!
// birthDate?: string | null | undefined;

3) optional

      birthDate: yup.string().optional()

// 아래와 같이 타입 추론됨
// birthDate?: string | undefined;

4)

      birthDate: yup.string()

// 아래와 같이 타입 추론됨
// birthDate?: string | undefined;

1)과 2), 그리고 3)과 4)는 null을 허용하느냐 아니냐에 주요한 차이가 있다.

추가적으로 1)과 2)의 차이가 궁금해서 코드로 좀 더 테스트 해보았다.

하나씩 따로 사용할 때는 차이가 없어보일 수 있지만, 중첩해서 사용하는 예시를 보면 차이를 알 수 있다.

birthDate: yup.string().required().nullable()

// 아래와 같이 타입 추론됨
// birthDate: string | null; >>> undefined 일 수 없음

주의해야 할 점은 두 메소드를 중첩해서 사용할 때 순서를 바꾸면 타입 추론도 변경된다.

birthDate: yup.string().nullable().required(),

// 아래와 같이 타입 추론됨
// birthDate: string;

3)과 4)의 경우에는 아직 본질적인 차이를 모르겠다.

3)의 경우가 좀 더 명시적으로 코드를 작성해서 유지/보수에 도움을 줄 수 있다는 것 정도가 차이점이 아닐까.

profile
부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!

0개의 댓글