리덕스툴킷(redux-toolkit)으로 리액트 로그인

프로젝트를 진행하면서 전역변수로 저장할 만한 것이 생겼다. 

우리는 로그인 여부에 따라 보이는 헤더가 달라보이게끔 

로그인 전에는 로그인, 회원가입메뉴가 헤더에 존재하고, 로그인 후에는 이 둘이 사라지고 마이페이지와,     로그아웃메뉴가 헤더에 존재하도록 구현하려고했다. 

 

처음에는 굳이 리덕스를 사용하지않고 세션스토리지에 저장해놓은 토큰의 존재유무에 따라 로그인 여부를 결정하려고했다. 

const [isLogin, setIsLogin] = useState(false);

useEffect(() => {
    const accessKey = localStorage.getItem("Access_key");
    if (accessKey) {
      setIsLogin(true);
    } else {
      setIsLogin(false);
    }
  }, []);

하지만 항상 새로고침을 해야 헤더창이 변경되는 문제점이 발생하였다.

 

그래서 전역상태관리도구인 리덕스툴킷을 이용해 로그인 여부를 관리해주기로했다.

 

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  isLoggedIn: false,
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    loginSuccess: (state) => {
      state.isLoggedIn = true;
    },
    logoutSuccess: (state) => {
      state.isLoggedIn = false;
    },
  },
});

export const { loginSuccess, logoutSuccess } = userSlice.actions;
export default userSlice.reducer;

처음 상태를  false로 초기화하고, 로그인에 성공할 시에 true로, 로그아웃에 성공할 시에는 false로 바꿔준다.

 

 

 //로그인 시
 const loginMutation = useMutation(loginAxios, {
    onSuccess: (response) => {
      alert("로그인 성공!");
      dispatch(loginSuccess());
      navigate("/main");
      resetEmail();
      resetPassword();
    },
    onError: (error) => {
      alert("아이디와 비밀번호를 다시 확인해주세요!");
      resetPassword();
    },
  });

  const loginButtonHandler = () => {
    loginMutation.mutate({ email, password });
  };
  
  //로그아웃시
    const logoutMutation = useMutation(logoutAxios, {
    onSuccess: () => {
      alert("로그아웃 되었습니다.");
      navigate("/");
    },
    onError: (error) => {
      throw error;
    },
  });

  const logoutHandler = async (e) => {
    e.stopPropagation();
    sessionStorage.removeItem("Access_key");
    sessionStorage.removeItem("Refresh_key");
    await logoutMutation.mutateAsync();
    dispatch(logoutSuccess());
    navigate("/");
    logoutMutation.mutate();
  };

이렇게 로그인과 로그아웃을 하면서 리덕스에 저장된 isLoggedIn의 상태를 변경했다.

 

마지막으로 이 로그인 상태를 활용하고 싶으면

  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);

user의 로그인 상태를 useSelector를 이용해 불러와 isLoggedIn에 저장하고, isLoggedIn의 상태에 따라 조건부렌더링을 해주면 처음에 원했던대로 잘 작동한다!