✨ 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: 'nori@naver.com',
    provider: 'naver',
    email: 'nori@naver.com',
  },
  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

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

nori-dongsan / nori-client