React) Recoil - recoilPersist, selector <TIL_2022_07_26>

recoilPersist()

https://velog.io/@tamagoyakii/42byte-Recoil%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

• 페이지가 변경되더라도 상태관리를 유지하기 위해 생성
• 로그인 상태 관리할때,

export const isLoggedIn = atom({
  key: `isLoggedIn${v1}`,
  default: false,
});

이렇게 atom 형태로 저장해서 사용하면 컴포넌트가 전환될때 새로고침하면 값 보존이 안된다.

const { persistAtom } = recoilPersist();

export const LoginState = atom({
  key: "LoginState",
  default: false,
  effects_UNSTABLE: [persistAtom],
});

이렇게 recoilPersist를 사용해서 선언해야 함.

로컬스토리지에 저장된 토큰을 활용하거나 자체 api를 만들거나 해서 로그인 여부를 확인하는 로직을 짠 후,

다음와 같이 useRecoilState를 이용해서 위에서 선언한 LoginState의 값을 변경한다.

값만 필요한 경우 useRecoilValue도 atom과 마찬가지로 사용할 수 있음

// useRecoilState
const [isLogged, setIsLogged] = useRecoilState(LoginState);

// useRecoilValue
const isLogged = useRecoilValue(LoginState);

 

Recoil - selector(비동기 데이터 처리)

atom이 있는데 selector를 왜 쓰는가?

1. atom을 구독하고 있다가 atom의 상태가 변함에 따라 함수 호출 가능
2. 서버와 통신하여 얻는 비동기 데이터를 전역 데이터로 가질 수 있음

get

• 함수가 할당될 수 있는 property. 여기서 서버와 통신함(async)
• atom의 값을 구독하고 있다가. setState에 의해 atom의 값이 변경될 때 get이 실행됨

set

• selector는 자체적으로 setState를 할 수가 없다 → set을 따로 설정해줘야 함
• 순서 : useSetRecooilState로 atom이 수정됨 → selector 안의 set이 실행 → selector 안의 get이 실행 → 함수 호출 (async)