[Challange] 유저정보 리코일로 관리하기

recoil로 유저 데이터 전역에서 관리하기

recoil은 사용해본 적이 없는데 왜 쉽다고 하는지 알 것 같다.

Recoil

키워드

RecoilRoot
atom
useRecoilValue

type

타입이 왜이렇게 복잡할까?? 아직 이해가 잘 안간다. 내가 직접 해봐야 이해가 갈 것 같다... 기능구현까지는 아니더라도 타입만이라도 해봐야겠다.

type ROLE_USER = 'user'
type ROLE_ADMIN = 'admin'

export const UserRole: ROLE_USER = 'user'
export const AdminRole: ROLE_ADMIN = 'admin'

export type UserRole = ROLE_USER | ROLE_ADMIN

export interface UserInfo {
  name: string;
  roles: UserRole[]
}
export interface User {
  userId: number;
  username: string;
  password: string;
  userInfo: UserInfo;
}

recoil

//1. RecoilRoot로 감싸준다.
function App() {
  return (
    <RecoilRoot>
      <RouterProvider router={routers} />
    </RecoilRoot>
  )
}
//2. atom 사용
export const UserAtom = atom<User | null>({
  key: 'user-atom',
  default: null
})
//3. useRecoilValue 사용해 atom을 사용한다.
const userProfile = useRecoilValue(UserAtom);