ohyein00 / react_megazine Goto Github PK

PrivateRoutes에서 recoil을 이용해서 userLogin 여부를 확인함
login 페이지 진입 시 로그인이 안되어있는 경우에만 진입이 되며,
login을 진행하면서 로그인 완료 이후 recoil 상에서 login 여부를 true로 변경 후
변경된 recoil 정보를 PrivateRoutes에서 캐치해서 login이 완료 됬는데 login 페이지에 접근한다고 판단해 안내 메시지와 함께 main 페이지로 보내버림

login pages에서(front/src/pages/Login/index.tsx)
로그인한 유저는 뒤로 보내기 위해 로그인 검증시

  const navigate = useNavigate();
  const isLogin = useRecoilValue(loginToken);
  if (isLogin) {
    alert('이미 로그인이 되어있습니다.');
    navigate(-1);
  }

형태로 recoil에 저장된 loginToken에 true, false 여부를 확인함
문제는 login form에서 통신 처리 후 onSuccess 처리 도중
useSetRecoilState(userToken)
함수를 이용해 Atoms 상태를 변경시킨 경우,
검증 코드에 useRecoilValue(loginToken);이 반영되어 나머지 처리 부분이 진행되지 않고 alert 창과 함께 navigate(-1); 기능이 실행됨

Atomic 구조로 가져온 input 태그에 react hook form에 useForm을 이용한 register 등록 시 onChange 기능이 동작하지 않음
예시 코드

import Input from "@atoms/Input";
import { FieldValues, useForm } from 'react-hook-form';
const {register, handleSubmit} = useForm<RegistrationFormFields>();
<Input id="userId" onChange={onChangeEmail}
             register = {register('userId', {required:true})}>아이디</Input>

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
react-hooks/rules-of-hooks

httpClient에서 recoil에 저장된 토큰을 받아오려고 하자, 컴포넌트 밖에서 선언된 훅은 사용할 수 없는 에러가 생긴다.
따라서 httpClient에서는 recoil을 받아오지 않고 로컬스토리지에 recoil-persist Key로 저장된 값을 가져와 JSON.parse를 해주었다.

const getToken = (tokenName: string) => {
  const localToken = localStorage.getItem('recoil-persist');
  if (localToken) {
    const tokenParseJson = JSON.parse(localToken)
    if (tokenParseJson !== '') {
      const token = tokenParseJson[tokenName]
      return token
    }
  }

위와 같이 해결됨