React - Recoil 사용 중 놓쳤던 특징

Recoil 특징

- 해당 상태를 구독하는 구성요소를 가진 함수가 리렌더링된다.

 

문제상황

회원가입 후 Recoil을 사용하여 회원의 유무를 판단하고 
PrivateRoute와 PublicRoute에서 useRecoilState를 사용했더니

다음 페이지로 넘어가야 되는 부분이 렌더링 되고 나서 
PrivateRoute와 PublicRoute가 또 실행되어 원하지 않는 페이지로 이동

 

 

과정 1.

PublicRoute 와 PrivateRoute 에서 UserStateCheck Recoil 변수를 사용 x
=> token 값의 유무로 판단

    // PublicRoute.js
    const userCheck = useRecoilValue(UserCheckState)
    return userCheck ? element : <Navigate replace to="/"/>;
    
    // 수정
    
    const tokenCheck = localStorage.getItem('access_token')
    return tokenCheck !==null ? element : <Navigate replace to="/"/>;

 

 

과정1 - 오류

- PrivateRoute가 2번 실행됨

- 로그아웃 기능이 안됨

과정 2. 

과정 1에서 발생한 오류 중 로그인 안되는 부분 수정

const logout=()=>{
    localStorage.removeItem('access_token');
    localStorage.removeItem('csrf_token');
    tokenCheckfunc()
}
const tokenCheckfunc=()=>{
    const tokenCheck = localStorage.getItem('access_token')
    console.log("tokenCheckfunc",tokenCheck)

    if(tokenCheck !== null){
        setUserCheck(true)
    }else{
        setUserCheck(false)
    }
}

// useEffect(()=>{
//     tokenCheckfunc()
// },[userCheck])




수정

 const logout=()=>{
    localStorage.removeItem('access_token');
    localStorage.removeItem('csrf_token');
    setUserCheck(false)
    navigate('/')
}

    

 

과정 3

userCheck를 true로 변경 후 useEffect 가 실행되기때문에 privateRoute가 실행되어 home으로 라우팅 됨

 

조건을 추가하여

카테고리 비어있을 경우 pospage 머물기

  // Poscategory.js
  useEffect(()=>{
    if(categories.length == 0){
      setCategoryState(true)
      console.log("setCategoryState(true)",categories.length)
    }else{
      setCategoryState(false)
      console.log("setCategoryState(false)",categories.length)
    }
  },[categories])
  
// Header.js

//kiosk 상태
const [isKiosk , setIsKiosk] = useRecoilState(KioskState)
// 카테고리 데이터 상태 체크 [0인경우 true]
const [categoryState, setCategoryState] = useRecoilState(CategoryState)
useEffect(()=>{
    const checkCategory = async () => {
        try{
            const category = await CategoryGetApi();
            if(category.categories.length !== 0){
                setCategoryState(false)
            }else{
                setCategoryState(true)
            }            
        } catch(err){
            console.log(err)
        }
    }
    checkCategory()
},[])
    
useEffect(() => {

    // isKiosk 값이 변경될 때마다 실행되는 useEffect를 이용하여 라우팅을 수행합니다.
    if (isKiosk) {
        navigate('/kiosk');
    }
    else if(!isKiosk && !categoryState){
        console.log("Header.js - useEffect[isKiosk] - !isKiosk")
        navigate('/home')
    }

}, [isKiosk]);

// CategoryState.js - recoil
import { atom } from "recoil";

export const CategoryState = atom({
    key: "CategoryState",
    default: false
});

 

로직을 바꾸는 방법도 있었지만 끝까지 해결하고 싶어 이틀정도 걸렸던 것 같다.
조건을 추가하는 방법말고도 다른 방법이 있을 것 같지만 시간을 더이상 투자하기에는 무리였다...

프로젝트 끝나고 다른방법을 찾아봐야겠다