[ 🌈 Notice ] Recoil 사용법

[Happhee]

✨ Recoil 이란?

Recoil의 기본, ⚛️ Atom

공식문서에서의 atom에 대한 설명은 다음과 같습니다.
atoms (공유 상태) 은 기존의 redux에서 쓰이는 store 와 유사한 개념입니다.

atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더 된다 !

unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유합니다✨
(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render )

👇 자세한 설명은 여기에!
[Recoil] Recoil 200% 활용하기

✨ Pic.me에 적용하기!

📂 폴더구조

우리는 기능이 메이커와 플레이어로 나뉘어 있기에 recoil 폴더 안에 maker, player 폴더를 만들고 그안에서 다시 atom, selector 파일을 만들어 놓았습니다.

✅ RecoilRoot

RecoilRoot는 리덕스의 Provier와 비슷한 역할을 수행하고, 여러개의 RecoilRoot가 공존할 수 있을 뿐만 아니라 atom state의 독립적인 공급자 / 저장소를 나타내는 역할을 한다!

📄 components/Router.tsx

const Router = () => (
  <BrowserRouter>
    <RecoilRoot>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/library" element={<Library />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/playerlanding" element={<PlayerLanding />} />
        <Route path="/makerlanding" element={<MakerLanding />} />
        <Route path="/voting" element={<Voting />} />
        <Route path="*" element={<Error404 />} />
      </Routes>
    </RecoilRoot>
  </BrowserRouter>
);

✅ atom

atom은 상태를 정의하는 방법이자 *전역 저장소**를 만드는 공간입니다.

💡 Tip) api명세서에 적힌 데이터 네이밍을 사용해 상태명을 지정해주면 헷갈리지 않고 관리할 수 있습니다 .

📄 recoil/player/atom.ts

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

import { VotingInfo } from './../../types/voting';

// ✅  페이지가 변경되더라도 상태관리를 유지
const { persistAtom } = recoilPersist();

// ✅ unique ID 를 가지고 초기 값을 지정해주어야 합니다!
export const votingInfoState = atom<VotingInfo>({
  key: 'votingInfo',
  default: {
    vote_id: 0,
    user_id: 0,
    vote_status: false,
    vote_title: '',
    pictures: [],
    current_vote: 0,
    maximum_vote: 0,
    created_date: new Date(0),
  },
  effects_UNSTABLE: [persistAtom],
});

✅ selector

selector는 recoil에서 관리하는 상태의 특정 부분만 선택하거나 해당 상태를 사용하여 연산한 값을 조회합니다. 즉, 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 해주는 것이 특징입니다.
더불어 동일한 Parameter를 제공하면 동일한 값을 return 하는 순수함수의 개념을 가지고 있습니다.

📄 recoil/player/selector.ts

import { selector } from 'recoil';

import { votingList } from './atom';

export const votingIdStateSelector = selectorFamily<VotingInfo[], number>(({
  key: 'votingIdSelector',

  get:  (param : number) => ({ get }) => get(votingList).filter((votingInfo)=> votingInfo.vote_id === number),
});

✅ 컴포넌트 or 페이지에서 사용하기

사용 방법

• useRecoilState 👉 atom에서 정의한 전역상태( 여기서는 userInfoState)를 state처럼 관리
• useSetRecoilState 👉 상태를 업데이트 하는 setter 함수만 반환
• useRecoilValue 👉 setter 함수 없이 atom의 값을 반환만 한다.
• useResetRecoilState 👉 atom에서 정의한 전역상태 초기화

📄 pages/Voting.tsx

// state 사용하는 것처럼 구현하면 됩니다!
const [newVotingInfo, setNewVotingInfo] = useRecoilState(votingStateSelector);

// 👇 매개변수가 있는 셀렉터 사용법
// useRecoilValue(votingIdStateSelector(voite_id));
  useEffect(() => {
    if (votingInfo) {
      setNewVotingInfo(votingInfo.data);
    }
  }, []);

📚 Reference

• atom(options)
• recoil 정확하게 사용하기
• Recoil 기초 개념 및 사용법
• [Recoil] Selector + useRecoilValueLoadable을 활용해서 API값 가져오기
• Recoil - 또 다른 React 상태 관리 라이브러리?

---

🌼 질문 너무너무 조아요 아쟈아쟈 🌼