To Do -3-

localstorage

localstorage를 이용한 새로고침을 해도 데이터가 날아가지 않게 하는 기능이 challenge에 포함되어 있어서 구현해보았다.

사용한곳은 atoms.tsx
recoil의 persist 기능으로 간단하게 구현가능했다.

import { recoilPersist } from "recoil-persist";


const { persistAtom } = recoilPersist({
  key: "todoLocal",
  storage: localStorage,
});

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

export const customCategories = atom<string[]>({
  key: "customCategory",
  default: [],
  effects_UNSTABLE: [persistAtom],
});

Create Custom Category

유저가 커스텀 카테고리를 구현하는 기능을 구현했다.

import { useForm } from "react-hook-form";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { categoryState, customCategories, toDoState } from "./atoms";

interface IForm {
  categories: string;
}

function CreateCustomCategories() {
  const setToDos = useSetRecoilState(toDoState);
  const setCustomValue = useSetRecoilState(customCategories);
  const category = useRecoilValue(categoryState);

  const { register, handleSubmit, setValue } = useForm<IForm>();
  const handleValid = ({ categories }: IForm) => {
    setCustomValue((prev) => [...prev, categories]);
    setValue("categories", "");
  };
  console.log(category, "category");
  return (
    <form onSubmit={handleSubmit(handleValid)}>
      <input
        {...register("categories", {
          required: "Please write custom categories",
        })}
        placeholder="Write a custom category"
      />
      <button>Add</button>
    </form>
  );
}

export default CreateCustomCategories;

이해가 안되서 구글선생과 다른분들의 코드를 뚫어지게 쳐다봤다. 어떻게 구현은 했지만 어떨떨하게 성공했다.