페이지네이션 방법론 차이(Offset vs Cursor) Offest Pagination보통 기본적으로 사용하는 페이지네이션이 Offset기반 페이지네이션 입니다. 사진 보니까 익순하시지 않나요? 각각의 request에 클라이언트는 page_size(offset)와 page_number(limit)를 payload에 실어서 전달합니다.- Page Size는 반환할 데이터의 개수를 나타냅니다.- Page Number는 현재 요청중인 페이지를 나타냅니다. 장점- 총 데이터개수와 Page크기를 알 수 있다.이는 사용자가 원하는 페이지를 선택하고 바로 그 페이지의 데이터를 볼 수 있다는 것을 의미합니다. 단점- 데이터가 불일치 할 수 있습니다.만약 사용자가 어떤 게시물의 1페이지부터 +1 씩 증가하면서 다음 페..

React Hook Form 공부 - 18 유효성 검증(Validation)의 심화 방식우리가 React-Hook-Form을 쓰는 이유는 클라이언트 상에서 유효성 검증을 쉽게 하기 위해서 인데요. 그래서 React-Hook-Form은 유효성 검증에서 다음과 같은 3가지의 심화된 방식도 제공합니다. 첫 번째, 비동기식 유효성 검증입니다. 간혹 커스텀 Validation할 때 외부 사이트에서 정보를 가져와서 비교할 때가 있는데요. 비동기식(async,await) 방식도 지원합니다. 이메일 부분에 지난 시간에 만든 커스텀 Validation이 2개가 있었는데요. 한 개를 추가해 보겠습니다. 이 Validation은 비동기식으로 통신해서 얻은 결과를 비교하게 됩니다. 코드의 간결성을 위해 username과 em..

React Hook Form 공부 - 17 폼 Submission 상태 값과 reset 함수React-Hook-Form의 formState에는 폼 Submission 상태 값이 4개가 있는데요.isSubmitting,isSubmitted,isSubmitSuccessful,submitCount isSubmitting 상태는 submit 버튼을 눌렀을 때고, isSubmitted 상태는 submit이 눌러져서 벌써 액션이 취해졌을 때입니다. isSubmitSuccessful은 submit이 성공적으로 작동했을 때를 나타내고,submitCount는 성공적인 submit의 갯수를 나타냅니다. 사용 방법은 formState에서 가져오면 됩니다.const { register, control, han..

React Hook Form 공부 - 16 폼 Submit disabled 시키기폼의 Submit 버튼을 조건에 따라 disabled 시키는 방법입니다. 필요한 함수는 isDirty 값과 isValid 값인데요. isDirty- isDirty는 폼이 한 번이라도 수정되었는지 여부를 나타내는 속성- 폼의 초기 상태와 비교하여 한 번이라도 변경이 발생하면 true를 반환하고, 변경이 없다면 false를 반환합니다.- 이 속성은 사용자가 입력을 시작했는지, 아니면 여전히 폼이 초기 상태인지 확인하는 데 유용합니다.isValid- isValid는 폼이 유효한지 여부를 나타내는 속성- 모든 필드가 유효성 검사를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.- 예를 들어, 특정 필드가 필수라..

React Hook Form 공부 - 15 handleSubmit 에러 발생시useForm() 함수가 리턴 하는 handleSubmit 함수를 이용해서 폼의 Submit 핸들링을 담당하는 함수를 지정했었습니다. 그런데, Submit이 실패했을 때도 핸들링할 수 있는 함수를 제공하는데요. handleSubmit 함수에 두 번째 인자가 폼 Submit이 실패했을 때 실행되는 콜백함수입니다 위 코드와 같이 onSubmit 함수는 우리가 Submit이 성공했을 때 작동되도록 만든 함수이고, onError 함수는 Submit이 실패했을 때 작동되도록 만들 예정인 함수입니다import { useForm, useFieldArray, FieldErrors } from "react-hook-form"; const on..

React Hook Form 공부 - 14 폼 항목 disable 하기HTML 태그에는 disabled 항목이 있는데요. 버튼에 disabled 항목이 추가되면 입력이 안 됩니다. React-Hook-Form에도 disabled 항목이 있는데요. 이 항목이 true이면, 입력도 안되고 해당 항목은 undefined가 됩니다. 그리고 해당 항목에 지정되어 있던 validation도 적용이 되지 않습니다. 그리고 disabled를 watch함수와 같이 쓸 수 있는데요. 코드를 보겠습니다. usename 항목이 비어있다면 true가 될 거고, 그러면 disabled 항목이 true가 되면서 결국 "age" 항목은 입력이 안되게 됩니다. disabled 항목 사용법은 wach 함수와 응용해서 사용하시면 됩니다.

React Hook Form 공부 - 13 touchedFields, dirtyFields, isDirty 함수 알아 보기아까 setValue 함수에서 shouldDirty, shouldTouch, shouldValidate 항목에 있는 Touched , Dirty에 대해서 다시 알아 보겠습니다. 사용자가 폼의 input에 포커스를 한 번이라도 가져갔다면 TouchhedFields 항목에 포함됩니다.그리고 dirtyFields에는 defaultValues와 다른 값이라면 그 항목은 dirtyFields 항목에 포함되죠. 그리고 isDirty는 현재의 Dirty 상태를 나타내 주죠. 사용 방법은 formState에서 각각의 항목을 디스트럭쳐링 해서 써야 합니다.const { register, c..

React Hook Form 공부 - 12 getValues, setValue 함수로 자바스크립트에서 FormValues 직접 제어하기React-Hook-Form의 useForm 함수는 getValues(), setValue() 함수도 제공합니다. 기본 형태Name | OutputgetValues() | { root: { test1: '', test2: ''} }setValue('name', 'value', { options }) setValue 옵션1. shouldValidate (boolean) => 유효성 검사를 수행할지 여부를 설정2. shouldDirty (boolean) => 필드를 'dirty' 상태로 설정할지 여부를 결정- ❓dirty 란?주로 사용자가 어떤 형태로든 입력 필드에..

React Hook Form 공부 - 11 watch를 이용해서 실시간으로 FormValues 감시하기useForm() 함수에는 watch 함수를 제공해 주는데요. 이 watch 함수를 이용하면 사용자가 현재 입력하고 있는 값을 실시간으로 감시할 수 있습니다. const { register, control, handleSubmit, watch, formState: { errors }, } = useForm({ defaultValues: { username: "IU", age: 0, dob: new Date(), }, }); const watchForm = watch("username"); const watchForm2 = watch..