[ Notice ] Recoil 사용방법

[Happhee]

✨ Recoil 이란?

Recoil의 기본, ⚛️ Atom

공식문서에서의 atom에 대한 설명은 다음과 같습니다.
atom 은 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위!!!

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

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

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

✨ Nori로 설명

📄 core/atom.ts

전역 저장소를 만드는 공간이라고 생각하면 될 것 같아요 !

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist'; 
import { PostLoginBody, UserData } from '../types/user';
// ✨ 페이지가 변경되더라도 상태관리를 유지
const { persistAtom } = recoilPersist();

export const userInfoState = atom<PostLoginBody>({
  // ✅  내부적으로 atom을 식별하는데 사용되는 고유한 문자
  key: 'userInfo',
 // ✅ atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector.
  default: {
    snsId: '[email protected]',
    provider: 'naver',
    email: '[email protected]',
  },
  effects_UNSTABLE: [persistAtom],
});

📄 pages/login.tsx

사용 방법

• useRecoilState 👉 atom에서 정의한 전역상태( 여기서는 userInfoState)를 state처럼 관리
• useResetRecoilState 👉 atom에서 정의한 전역상태 초기화

// ✨ 요기!!
const [userInfo, setUserInfo] = useRecoilState(userInfoState);
  const resetList = useResetRecoilState(userInfoState);

  console.log(userInfo);
  const handleLogin = async (social: string) => {
    if (data?.user) {
      const userLoginData = {
        snsId: data?.user.email,
        provider: social,
        email: data?.user.email,
      } as PostLoginBody;
      const login = await userLogin(userLoginData);
      if (login.data) {
      // ✨저장 방법 동일 
        setUserInfo(userLoginData);
      }
    }
  };

📚 Reference

• atom(options)
• next.js에서 recoil 사용하기

---

모르는건 언제든 물어보기 💚