[ TIL ] react-hook-form

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

 

register 함수를 사용하면 onChange 를 핸들러 할 필요가 없다.

 

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

 

const {register} = useForm();

 

onBlur 다른 곳 클릭하는 것 ..........

 

register 는 객체

여기에 name, onBlur, onChange, ref 등 ...이 있다.

 

const {register, watch} = useForm();

 watch가 나의 form 에 대한 모든 내용을 감시한다.

watch() 해 보면 값이 변할 때 마다 값을 출력해주고있음

 

 <input {...register("toDo")} placeholder="Write a to do"/>

 

우리가 이렇게 적은 "toDo" value 를 key 로 갖고있다. 

 

function ToDoList(){
  const {register, watch} = useForm();
  console.log(watch());

  return (
    <div>
      <form>
        <input {...register("email")} placeholder="email"/>
        <input {...register("firstName")} placeholder="First Name"/>
        <input {...register("lastName")} placeholder="Last Name"/>
        <input {...register("userName")} placeholder="Username"/>
        <input {...register("password")} placeholder="Password"/>
        <input {...register("password1")} placeholder="Password1"/>
        <button>Add</button>
      </form>
    </div>
  );
}

 

하나의 객체 안에 form 이 만들어진다.

 

새로운 input 을 만들때마다 register 함수만 실행해주면

register 함수가 그 input 을 여기 있는 객체에 값으로 준다.

 

watch 는 지정된 input 을 감시하고 해당 값을 반환한다.

 

 

  const {register, watch, handleSubmit} = useForm();

 

handleSubmit 이 validation 을 담당한다.

 

required

 

항목에 객체 혹은 숫자가 들어갈 수 있음 문자열도 들어갈 수 있음 

 

정규식 사용하여 검증하기 

 

react -hook-form 에서 setError import. 

setError 는 특정 에러를 발생시킨다.

 

메세지도 보낼 수 있다. 

 

extraError

 

 

form 에 대한 error가 아닌 발생하는 문제에 따라 추가적으로 에러를 설정할 수 있게 해줌

 

validate 는 인자로 항목에 현재 쓰여지고 있는 값을 받는다.

return true 혹은 false 한다.

 

 

<input {...register("firstName", {
          required:true, 
          validate:(value)=>
            value.includes("nico") ? "no nicos allowed" : true,
          })} 
          placeholder="First Name"/>

 

이렇게 검증을 만들어 줄수있다. 

 

 <input {...register("firstName", {
          required:true, 
          validate:{
            noNico: (value)=> value.includes("nico") ? "no nicos allowed": true,
            noNick: (value)=> value.includes("nico") ? "no nicos allowed" : true,
          }
        })}
          placeholder="First Name"/>

 

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

function ToDoList(){
  const {
    register,
    handleSubmit
  } = useForm();
  const onSubmit = (data) => {
    console.log('add to do', data.toDo)
  }
  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("toDo")} placeholder="Write a to do" />
        <button>Add</button>
      </form>
    </div>
  );
}

 

 

useForm 에서 import 한 handleSubmit 은 인자 두가지를 받는데,

첫번째가 submit에 성공 했을 떄 실행시킬 함수,

두번째가 실패했을 때 실행시킬 함수이다.

 

handleSubmit 이 데이터가 유효한지 검사하고

data가 유효하다면 내가 만든 함수를 호출 

 

recoil 로 set 해주면 값을 즉시변경 할 수 있음 

 

1. find to do 로 todo 찾아주기 

 

 

as any 붙여주면 ts에게 타입 체크하지 말라고 하는거임 

 

원래것을 건들이지 않고 새로운 함수를 지정.

immutable 

 

 

selector 로 atom 카테고리 분류하기

atom 여러개 만들고 싶지 X

 

selector 는 atom 의 output을 변형시키는 도구이다. 

atom 은 배열을 줄 뿐

selector 는 state를 가져다가 뭔가를 return 한다. 

 

export const toDoSelector = selector({
  key:"toDoSelector",
  get: ({get})=> {
    return "hello";
  }
})

 

selector에 get 이 있어야 atom 을 가져올 수 있다. 

 

export const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
});

export const toDoSelector = selector({
  key:"toDoSelector",
  get: ({get})=> {
    const toDos = get(toDoState);
    return toDos.length;
  }
})

 

이렇게 해주면 selector가 atom 을 보고 있다. 

atom 이 변하면, selector도 변한다.

 

 

export const toDoSelector = selector({
  key:"toDoSelector",
  get: ({get})=> {
    const toDos = get(toDoState);
    return [toDos.filter(toDo => toDo.category === "TO_DO")];
  }
})

 

 

export const toDoSelector = selector({
  key:"toDoSelector",
  get: ({get})=> {
    const toDos = get(toDoState);
    return [
      toDos.filter(toDo => toDo.category === "TO_DO"), 
      toDos.filter(toDo => toDo.category === "DOING"),
      toDos.filter((toDo) => toDo.category === "DONE"),
    ];
  }
})

 

이렇게 쓸 수 있구만 .. 

get은 option 이란걸 받으면서 실행되는데 

options 는 객체다 .

그리고 그 객체에 get function 이 들어있다. 

 

 

get functino 을 쓰면 내부로 atom 을 가지고 올 수 있다. 

 

  const [toDo, doing, done] = useRecoilValue(toDoSelector);

 

여기서 useRecoilValue 는 [ [  ] ,  [  ]  ,  [   ] ] 이런 배열을 반환하고 

배열 안의 배열을 꺼낼 때는 이렇게 할 수 있다. 

 

state 를 변경하지 않고 output을 만들 수 있다. !