State Management

welaundry의 인증 상태 관리에 대한 관심사 분리를 설명합니다.

useAuthFetch

export const userState = atom<string | undefined>({
  key: 'user',
  default: undefined,
});

export const useAuthFetch = (): IAuthFetch => {
  const [user, setUser] = useRecoilState(userState);
  const authService = useRecoilValue(authApi);

  const { isLoading } = useQuery(queryKeys.auth.me(), () => authService.me(), {
    retry: false,
    refetchOnWindowFocus: false,
    onSuccess: (data) => {
      setUser(data?.data.username);
    },
  }); 

  return { user, isLoading }
}

AuthContext

const AuthContext = ({ children }: IAuthContextProps) => {  
  const { user, isLoading } = useAuthFetch();

  return (
    <>
      {
        isLoading ? <LoginLoading /> :
        user ? children : <NonUserRouter />
      }
    </>
  )
}
export default AuthContext;

• 위 코드는 사용자 인증 성공 여부에 따른 라우터된 화면을 보여줍니다.

• Server(React-Query)에서 응답한 사용자의 정보를 받아 Client(Recoil)의 전역 상태로 관리되어 집니다.

• 비즈니스 로직과 UI로직을 따로 분리하기 위해 useAuthFetch 라는 Custom Hook을 만들어 인증에 대한 상태를 선언형으로 쉽게 사용하도록 하였습니다.