zustand

들어가기전..

회사에서 상태 관리 라이브러리를 채택하려는 과정에서 zustand를 사용하고 난 후의 후기입니다.

🧐 최대한 옳바른 단어를 선택해 사용하려했습니다.

그러나 상황과 맞지않는 단어가 있을수 있으니, 그땐 살포시 코멘트를 남겨주세요

미리 감사합니다 😊

zustand

jotai를 만든 제작자의 또 다른 상태 관리 라이브러리
불필요한 개념들이 없고, 초보가 빠르게 적응할 수 있는 라이브러리 중 하나같다. (마음에 무척 든다.)

따로 공식 홈페이지는 없어서 아쉽지만 대신 깃허브에 설명은 나와있다.

깃허브

store

유일하게 알아두어야 할 내용인것같다.
redux와 recoil처럼 유니크한 key값이 필요하지않다.(= 보일러플레이트가 없다)

//사용예시
import create from "zustand";

const useStore = create((set) => ({
  apiData: [],
  setData(data) {
    set(() => ({
      apiData: data,
    }));
  },
}));

export default useStore;

적용 예시

function App() {
  //이렇게 store를 가져올 수 있다.
  const { apiData, setData } = useStore((state) => state);
  
  //진호님께서 알려주신 방법
  //click하거나 delete시 호출을 해줘야하기 때문에 함수로 뺐다.
    const getData = useCallback(async () => {
    const res = await fetch(`${URL}/todo`).then((res) => res.json());
    setData(res.data);
  }, [setData]);
  
  
  //post 요청 방식
  const onClick = async (e) => {
    const { title, content } = form;
    e.preventDefault();

    await fetch(`${URL}/todo`, {
      method: "POST",

      body: new URLSearchParams({
        title,
        content,
      }),
    });

    setForm({ title: "", content: "" });
    setShow(false);
    
    //함수로 만든 api호출
    getData();
  };

  const onDelete = async (e) => {
    await fetch(`${URL}/todo/${e}`, {
      method: "DELETE",
    });

    getData();
  };

  useEffect(() => {
    //최초 렌더링시 data를 가져와야해서 부름
    getData();
  }, [getData]);
}

마무리

• 오늘도 진호님께 감사 😊😀😁
• recoil쓸거면 zustand 쓰는게 초보한테는 더 좋을것같음!

결과물

사용한 깃허브 (⚠️ 코드 더러움 주의)