Typescript & React/useForm (3) 썸네일형 리스트형 formState의 errors input 의 값을 유효성 검사를 하려면 어떻게 해야될까? 1. 셋팅 우선 useForm 훅을 불러오자. import { useForm } from "react-hook-form"; 그리고 useForm 훅의 반환 값에서 아래와 같이 설정하자. const {formState:{errors}, register} = useForm({ mode: "onChange" }) 2. 사용법 1) FormError 컴포넌트를 만들자 import React from "react" interface IFormErrorProps { errorMessage?: string; } export const FormError: React.FC = ({errorMessage}) => ( {errorMessage} ) 2) 구현: 에러.. getValues 함수 기본적으로 useForm이 아래와 같이 반환한다는 것을 알고 있다고 전제한다. const {register, getValues} = useForm(); getValues 함수는 어떤 목적으로 사용할까? 특정 필드의 값을 가져온다. 아래의 예시에서 input태그와 select태그의 name값을 key 라고 생각하고 input의 (value속성) 값을 가져와서 value값으로 사용한다. Male Female 결과 { username: "Mr.Typescript", email: "Mr.Typescript@googole.com", gender: "male" } 그런데 React를 사용하고 useForm 훅을 정의하고 활용할 수 있는 register 함수가 있다. 활용해보자. 아래의 ...register('cus.. useForm 의 getValues 함수의 이해 1. 우선 input 태그의 'price'와 maintenance_cost의 값이 왜 string 값으로 나오는 지 의문을 가졌다. DB에서 price와 maintenance_cost 컬럼은 'integer형'으로 받고있다. 왜 getValuse 함수가 반환하는 price와 maintenance_cost의 값은 string값일까? 라는 의문이 들었다. console.log(typeof price); console.log(tyoeof maintenace_cost); 에는 'string string '값이 찍힌다. 이렇게 되면 값을 계산하기 불가해서 number 타입으로 변경이 필요했다. interface IForm{ customer: string; address: string; description: st.. 이전 1 다음