Yup 란?
Yup 는 Javascript 로 작성된 유효성 검사 라이브러리 이다. 특히, Yup 는 객체 스키마를 정의하고 이를 사용하여 입력 데이터의 유효성을 검사하는데 메우 유용하다. 주로 Form Data의 유효성 검사와 관련하여 React 및 다른 프론트엔드 프레임워크와 함께 사용된다.
Yup 는 강력하고 유연한 유효성 검사 도구로서, 개발자가 복잡한 입력 데이터의 유효성을 쉽게 관리할 수 있도록 도와준다.
스키마 정의, 유효성 검사, 오류 처리
Yup 설치하기
npm install yup
yarn add yup
React에서 Yup 를 사용하는 이점
1. 간편한 유효성 검사 설정
- Yup은 객체 스키마를 사용하여 유효성 검사를 설정할 수 있다.
- 간단한 구문을 사용하여 필드의 필수 여부, 최소/최대 길이, 형식, 범위 등을 정의할 수 있다는 것을 의미한다.
2. 유연성
- Yup은 다양한 유효성 검사 규칙을 지원하므로 복잡한 유효성 검사를 수행할 수 있다.
- 예를 들어, 정규식을 사용하여 특정 패턴을 갖는 문자열을 검증할 수 있다.
3. React 와의 통합
- Yup 는 React 와 함께 사용하기에 용이한데, React Component 의 상태와 Yup 스키마를 연결하여 유효성 검사를 수행하고, 오류 메시지를 표시하거나 다른 동작을 수행할 수 있다.
4. 오류 처리
- Yup 는 입력 데이터의 유효성을 검사하고, 오류를 반환한다.
- 이를 통해 개발자는 사용자에게 명확한 오류메시지를 제공하거나 특정한 동작을 수행할 수 있다.
5. 재사용성
- Yup Schema 는 다른 부분에서도 재사용할 수 있다. 예를 들어, 같은 유효성 검사 규칙이 다른 부분에서도 필요한 경우 해당 규칙을 Yup 스키마로 정의하고 필요한 곳에서 공유하여 사용할 수 있다.
6. 확장 가능성
- Yup 는 확장 가능한 구조를 가지고 있다. 필요에 따라 사용자 정의 검사 함수를 정의하거나 Yup의 기능을 확장하여 특정 요구 사항에 맞게 조정할 수 있습니다.
코드 적용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import * as Yup from "yup";
const schema = yup.object().shape({
// 비밀번호
password: Yup.string()
.required("Password is required")
.min(8, "Password must be at least 8 characters")
.matches(
/^(?=.*[A-Za-z])(?=.*\d)/,
"Password must contain at least one letter and one number"
),
// 나이
age: Yup.number()
.required("Age is required")
.min(20, "Age must be at least 20")
.max(50, "Age cannot exceed 50"),
// 이메일
email: Yup.string()
.email("Invalid email format") // 이메일 형식을 검사하는 Yup 메서드 사용
.required("Email is required")
});
|
Yup의 다양한 내장 함수를 사용하여 유효성 검사 규칙을 정의할 수 있다.
1. string(): 문자열 값을 검사
1
2
3
4
5
| import * as Yup from "yup";
const schema = Yup.object().shape({
name: Yup.string().required("이름은 필수 입력 사항입니다.")
});
|
2. number(): 숫자 값을 검사
1
2
3
4
5
6
7
8
| import * as Yup from "yup";
const schema = Yup.object().shape({
age: Yup.number()
.positive()
.integer()
.required("나이는 필수 입력 사항입니다.")
});
|
3. required(): 필수 입력 여부를 검사
1
2
3
4
5
| import * as Yup from "yup";
const schema = Yup.object().shape({
email: Yup.string().email().required("이메일은 필수 입력 사항입니다.")
});
|
4. email(): 이메일 형식을 검사
1
2
3
4
5
6
7
| import * as Yup from "yup";
const schema = Yup.object().shape({
email: Yup.string()
.email("유효한 이메일 주소를 입력해주세요.")
.required("이메일은 필수 입력 사항입니다.")
});
|
5. matches(): 지정한 정규표현식과 일치하는지 검사
1
2
3
4
5
6
7
8
9
10
| import * as Yup from "yup";
const schema = Yup.object().shape({
password: Yup.string()
.matches(
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
"비밀번호는 최소 8자 이상이어야 하며, 최소 하나의 문자와 하나의 숫자를 포함해야 합니다."
)
.required("비밀번호는 필수 입력 사항입니다.")
});
|
마무리
이러한 Yup의 내장 함수들을 활용하여 간단하게 React 폼의 유효성을 검사할 수 있다. 이러한 유효성 검사 규칙은 사용자가 입력한 데이터가 예상대로 형식에 맞게 제출되는지를 보장하고, 사용자에게 오류 메시지를 제공하여 더 사용하기 편리한 경험을 제공한다.