작심삼일 개발이야기

폼을 작성할 때, 여러 가지 조건이 발생하는 경우가 있습니다. 특정 값을 선택했을 때만 입력 필드가 나타나야 하거나, 특정 값이 선택되었을 때는 필수 입력 필드가 되지만 다른 값이면 필수가 아닌 등 다양한 상황이 발생할 수 있습니다. 이런 상황에서 Yup의 when 메서드를 사용하면 원하는 조건에 따라 유효성 검사를 동적으로 설정할 수 있습니다. 공식문서의 예시코드를 가져와 when의 사용법에 대해 설명하겠습니다. when의 타입은 아래와 같이 정의되어 있습니다. Schema.when(keys: string | string[], builder: object | (values: any[], schema) => Schema): Schema when 메서드는 두 개의 매개변수를 사용하며, 첫 번째 매개변수는 ..

React Hook Form을 사용하여 폼을 만들 때, 마지막 단계로 폼의 유효성 검사를 하는 것은 중요한 과정 중 하나입니다. 이때 유효성 검사란 사용자가 입력한 데이터가 원하는 규칙에 부합하는지 확인하는 작업을 의미합니다. React Hook Form에서는 register 메서드를 사용하여 각 입력 필드에 대한 유효성 검사 규칙을 정의할 수 있습니다. 그러나 폼이 복잡해지고 유효성 검사 규칙이 많아질수록 JSX 코드는 복잡해지고 가독성이 떨어질 수 있습니다. 이런 상황에서 Yup을 사용하면 유효성 검사 규칙을 한 곳에서 효과적으로 관리할 수 있습니다. Yup은 선언적으로 유효성 검사 규칙을 정의할 수 있어 코드의 일관성을 유지하고 가독성을 향상합니다. 따라서 JSX(TSX) 코드에서는 각 입력 필드에..

front-end 하면 빠질 수 없는 것이 Form이다. 하나하나 만들어서 관리하려니 코드도 길어지고 너무 힘들어서 라이브러리를 통해 관리해보려고 찾아봤다. 대표적인 라이브러리로 Formik과 React-hook-form이 있다. 이번에는 form라이브러리인 Formik과 유효성 검사 라이브러리 Yup을 사용해보려 한다. 제일 처음 formik과 yup을 설치하자 npm i formik npm i yup form에 사용 할 상태의 초기 값을 initialValues을 통해서 설정한다. const formik = useFormik({ initialValues: { firstName: "", lastName: "", channel: "", }, }); 초기 값을 사용 할 곳에서 value의 속성 값으로 초기..