[REACT] useRecoilState 사용하기

학습일 : 2023. 04. 18

---

 

useRecoilState 사용하기

useRecoilValue, useSetRecoilState 이렇게 두개의 함수를 따로 쓰는 것 보다
  새 배열을 만들고 useRecoilState 함수를 사용해보도록 하자.
  () 안에는 역시나 atom을 넣어주면 된다.
  꼴이 useState랑 똑같다.

 

  value만 불러오고 싶을 때는 useRecoilValue를 사용,

  value를 바꾸고 싶으면 useSetRecoilState를 사용,

  value와 modifier 함수를 둘다 얻고 싶다면 useRecoilState를 사용하면 되는 것이다.

 

사용법은 이러하다.

const value = useRecoilValue(toDoState);
const modFn = useSetRecoilState(toDoState);
const [value, modFn] = useRecoilState(toDoState);

  toDo state를 생성한다.  recoil의 atom 함수를 이용해야 함
import { atom } from "recoil"; 해주고
atom() 은 고유한 키가 필요하기 때문에 key : "" 를 적어줌
또한 default value를 가지고 있는데, 기본값은 일단 빈 배열로 설정하겠다.
atom 값에 접근하려면 전에도 했다시피, useRecoilValue 함수를 이용하면 된다.

import { useForm } from "react-hook-form";
import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";

// toDoState를 생성
const toDoState = atom({
  key: "toDo",
  default: [],
});

interface IForm {
  toDo: string;
}

function ToDoList() {
// useRecoilState
  const [value, modFn] = useRecoilState(toDoState);
  const { register, handleSubmit, setValue } = useForm<IForm>();

  const handleValid = (data: IForm) => {
    console.log("add to do", data.toDo);
    setValue("toDo", "");
  };

  return (
    <div>
      <h1>Thorn To Do</h1>
      <hr />
      <form onSubmit={handleSubmit(handleValid)}>
        <input
          {...register("toDo", {
            required: "please write a to do",
          })}
          placeholder="오늘 해야할 일을 입력하세요"
        />
        <button>add</button>
      </form>
      <ul></ul>
    </div>
  );
}

export default ToDoList;