선생님 리액트 리코일 & 리액트쿼리 로그인질문있습니다

[정중식]

저 정말 진지하게 깊은 고뇌에빠졌습니다 제발 도와주세요.. 최대한 선생님이 알아보실수있게끔 작성해보겠습니다..!

1) 먼저, 리액트 리코일로 로그인,회원가입 로직을 짰었습니다.

import { atom, selector } from 'recoil';
import { fetchUserInfo } from '../api/auth';
import { IUserInfo } from '../interface/auth';

// 유저 인증
export const authState = atom<IUserInfo | null>({
  key: 'authState',
  default: JSON.parse((localStorage.getItem('user') as string) ?? null),
});

// 서버쪽에 토큰을비교해서 유저정보를 리턴해줌

export const getUserInfo = selector({
  key: 'getUserInfo',
  get: async ({ get }) => {
    const res = await fetchUserInfo();

    return res;
  },
});

2) 로그인, 회원가입시 아래와 같은 코드로 로컬스토리지에 저장시켜줬어요

  const setUserInfo = useSetRecoilState(authState);

  const user = JSON.parse(localStorage.getItem('user') as string);
  setUserInfo(user);

혹시 여기까진 이해가되셨을까요?
App.tsx에 다음과 같은 코드를 썼지만 주석처리해놨습니다.
이코드는 서버 api쪽에 토큰을 비교해서 로그인유저 정보를 리턴해주는코드입니다.

 // const userInfo = useRecoilValueLoadable(getUserInfo);
 // console.log(userInfo);

3) 어라?근데 프라이빗 라우터가 필요한거같네? 해서 리액트쿼리로 다음과같이 구현했어요

// 프라이빗 라우터

import useAuthenticate from 'hook/use-authenticate';
import { Outlet, useNavigate } from 'react-router-dom';
import Loading from './common/loading';

export const PrivateRoute = () => {
  const { userLoginInfo, isLoading, isError } = useAuthenticate();

  const navigate = useNavigate();

  if (isLoading) {
    return <Loading />;
  }

  if (isError || !userLoginInfo) {
    // 에러가 발생하거나 사용자 로그인 정보가 없는 경우 로그인 페이지로 이동
    navigate('/');
    return null;
  }

  // 사용자 로그인 정보가 있으면 Outlet을 반환하여 해당 경로로 이동
  return <Outlet />;
};

// useAuthenticate hook

import { fetchUserInfo } from 'api/auth';
import { useQuery } from 'react-query';

const useAuthenticate = () => {
  const {
    data: userLoginInfo,
    isLoading,
    isError,
  } = useQuery('userInfo', fetchUserInfo);

  return { userLoginInfo, isLoading, isError };
};

export default useAuthenticate;

위의 코드에서 fetchUserInfo역시 서버에 토큰을비교해서 로그인유저 정보를 리턴해주는코드입니다.

여기까지 무지성으로 작성후 다른작업중에 리액트쿼리와 리코일 둘다 사용하고있는걸 알게되었는데요..

4) 만약 리액트쿼리만 사용하고싶다하면, 
로그인,회원가입 로직에서 리코일로 
    const user = JSON.parse(localStorage.getItem('user') as string);
      setUserInfo(user);
처리한부분은 지워주는게맞나요?

5) 근데, 위의 4번코드같은 경우 setUserInfo(user) 리코일 코드같은경우 단순히 로컬스토리지 정보를 저장해주는 용도입니다.
로그인 버튼 / 사용자 프로필 버튼 UI를 바꿔주기위해서요, 그럼 회원가입 로그인 로직에있는 4번코드는 지우지말고,

6) 

export const getUserInfo = selector({
  key: 'getUserInfo',
  get: async ({ get }) => {
    const res = await fetchUserInfo();

    return res;
  },
});

이 리코일 코드를 지울까요?

솔직히 글 쓰고보니까 6)번만 지우면 해결될거같긴한데 선생님 생각은어떠실까요? 제발 부탁드립니다 가끔 선생님 챗지피티같아요.. 선생님이 챗지피티가 아니라는걸 증명해주세요 ㅠㅠ 예를들면 답변에 당근 이모티콘을 써준다던가요..

[codingapple]

리액트쿼리로 계속 로그인정보 받아오는거보다는 로그인여부를 state와 로컬스토리지에 넣어두고 계속 쓰는게 효율적이고 나아보입니다

[정중식]

기대했던 당근은 없지만 깔끔한 답변 감사합니다..

[글쓴이]

글