recoil

Jetom·2022년 12월 2일
0

etc(언어 외의 기술)

목록 보기
7/11
post-thumbnail

들어가기전..

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

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

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

미리 감사합니다 😊

recoil

페이스북이 만든 상태 관리 라이브러리

사용하려면 RecoilRoot으로 알려주고 써야함

// RecoilRoot 사용 예시

import React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil";
import App from "./App";
import "./style/global.scss";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

Atom

상태 단위이고, 업데이트와 구독이 가능

atom이 업데이트되면 구독된 컴포넌트가 새로운 값을 반영해 다시 렌더링 된다.

  • useRecoilState
    • atom을 읽고 쓰려면 useState와 비슷한 useRecoilState를 사용해야한다.(atom을 구독하는 모든 컴포넌트랑 공유하게됨)
//atom 사용 예시

export const todoIdState = atom({
  key: "todoIdState", //고유한 key값
  default: 1, //초기값
});

Selector

selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수

atoms나 selectors가 업데이트되면 하위 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 아톰처럼 구독할 수 있고 변경되면 컴포넌트들도 다시 렌더링된다.

//selectors 사용 예시

export const todoSelector = selector({
  key: "todoSelector",

  get: async ({ get }) => {
    get(todoIdState); // track
    const res = await fetch(`${URL}/todo`);
    const todos = await res.json();
    return todos;
  },
  set: ({ set }) => {
    set(todoIdState, (id) => id + 1);
  },
});

아…음..어?…..하…

공식 홈페이지가 있음에도 불구하고, 빈약한 예제때문에 속앓이를 많이 했습니다.

예를들어 post 요청을 어떻게 해야하는지 ? (무수히 많은 get 요청 예시들을 보고 깨달았습니다..아.. 이건 아니다..라고) post 요청 후 어떻게 state를 업데이트 시키지? 같은 생각에 여러 레퍼런스들을 찾고, 유튜브 영상을 봤지만…

selectors 사용 예시를 보시면 set에서 todoIdState에 +1을 해주는것을 볼 수 있는데, 이렇듯 불필요하게 업데이트 시켜서 http 메서드를 확인해야했습니다.

//사용 예시

const onSubmit = async () => {
    const { title, content } = form;

    if (title.length === 0 || content.length === 0) {
      return alert("title || content 입력");
    }

    // 요청
    await fetch(`${URL}/todo/`, {
      method: "POST",
      body: new URLSearchParams({
        title,
        content,
      }),
    });

    // 요청 보내면 id 업데이트
    setTodo();

    setForm({
      title: "",
      content: "",
    });

  };

쓰면서 아…음..어?…..하… 소리가 나는 라이브러리는 처음이라 당황스러움이 있었습니다.. 따흑..

간단한 todo list를 만들면서 불편한 점이 있다보니, 만약 저희 프로젝트에 적용했다면 어떻게 됐을까?? 라는 생각에 1초 묵념하고 빠져나왔습니다.

그래도 이건 좋더라!

쓰다보니 단점만 말한것 같아 (급하게) 추가한 장점

redux는 스토어를 여러개를 써야하지만, 리코일은 atomFamily라는 메서드가 있었기때문에 atom이 많아진다면 atomFamily를 활용해 쓰는것도 좋아보입니다. 마찬가지로 selectorFamily도 있습니다.

suspense가 굿입니다.

비동기 처리 시 로딩중이거나 에러가 발생했거나 이런 각종 상황에 놓였을때 유연하게 대처할 수 있는 메서드가 있습니다. useRecoilStateLoadable(state)를 사용하거나 useRecoilValueLoadable(state) 사용하거나 Suspense를 사용하면 될것같습니다. (골라잡으세요)

이것저것 찾아보니 레퍼런스는 많았습니다.

github에서 저와 같은 상황에 놓인 유저들이 있었고, 그에 따른 해답을 제시하는 유저들도 있었습니다. 자신의 블로그에 유튜브 강의와 함께 코드를 올려두는 유저도 있었고, fe 컨퍼런스에서 recoil을 소개하는 영상도 있었습니다.

마무리

  • 음.. 저희가 graphql을 쓴다면 그때 다시 recoil을 살펴보면 될것같네요…. 핫핫핫!
  • 🙇‍♀️🙇‍♂️🙇 api 제공해주신 도현님께 무한 감사!!!!! 🙇‍♀️🙇‍♂️🙇
  • 🙇‍♀️🙇‍♂️🙇 도움주신 진호님께도 무한 감사!!!!! 🙇‍♀️🙇‍♂️🙇

그럼 끝 !

결과물

(https://velog.velcdn.com/images/jetom/post/09f0a0fd-7dcf-4054-ad14-f882ee41fe6b/image.gif)

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

profile
사람이 좋은 인간 리트리버 신혜리입니다🐶

0개의 댓글