[TIL #47 기업 협업] TypeScript로 작성해보기

210427 WECODE #47 기업협업 12일차

React-Hook-Form을 TypeScript로 작성해보기

React-Hook-Form을 공식문서에서 javascript로 실습해보고

기업 협업 과제를 typescript로 작성하던 중 차이점을 몇가지 알게 되었다.

> typescript로 작성할 때

import { useForm } from "react-hook-form";

• import useFrom에 중괄호{ }를 넣어주어야 const { ... }= useForm();에 빨간 줄로 그어지는 error를 없앨 수 있다.

const { register, 
        handleSubmit, 
        formState: { errors },
       } = useForm();

• 에러 처리를 위해 자바스크립트로 errors라고 작성하던 것을
  타입스크립트에서는 formState: { errors }로 작성해야 한다.
  errors => formState: { errors }

> name

각각의 필드는 등록 과정의 key 로 사용하기 위해 name 속성이 반드시 필요하다.

select box

//javascript
<select 
  name="color" 
  ref={register({ required: true })}>
  ...
  <option value="blue">"blue"</option>
  ...
</select>

//typescript
<select {...register("color")} required>
  ...
 <option value="blue">"blue"</option>
  ...
</select>

• name="color" = {...register("color")}

• 유효성 검사
  ref={register({ required: true })} = required

check box

//javascript
<input type="checkbox" name="color" value="blue">
...
...

//typescript
<div> 
  <input type="checkbox" {...register("color")} value="blue" /> "blue"
</div>
...
...

name="color" = {...register("color")}