REACT 새로고침시 로그인 유지

1. 로컬스토리지와 contextApi를 사용한다.

Home.js

//로컬스토리지 로그인 true false값을 통해 contextAPi값을 변경해준다.
   const isLoginStr = window.localStorage.getItem("isLoginSuv");
   if(isLoginStr==="TRUE"){
      setIsLogin("TRUE");
   }else{
    setIsLogin("FALSE");
   };
  //로컬스토리지값을 지움으로써 로그아웃상태로 만든다.
  const onLogOut=()=>{
    window.localStorage.setItem("userIdSuv", "");
    window.localStorage.setItem("isLoginSuv", "FALSE");
    window.location.replace("/");
  };

2. 로그인시 로컬스토리지 로그인 여부를 true로 바꿔주면서 이를 contextapi와 연동시킨다.

//로컬스토리지로 유저아이디, 로그인여부를 체크한다.
    window.localStorage.setItem("isLoginSuv", "FALSE");
    window.localStorage.setItem("userIdSuv", "");

//onClick시 실행
    const onClickLogin = async() =>{ 
        // 로그인을 위해 axios 호출 JAVA를 통해 DB를 갔다온다.
        const response = await AxiosApi.memberLogin(inputId,inputPw);
        console.log(response.data);
        if(response.data===true){
            //들어온 id,pw 를 ContextApi에 저장.
            setUserId(inputId);
            setPassword(inputPw);
            //로그인시 유저아이디와 로그인여부에 값을 바꿔준다.
            window.localStorage.setItem("isLoginSuv", "TRUE");
            window.localStorage.setItem("userIdSuv", inputId);
            //로그인 성공시 home화면으로 돌아간다.
            navigate ("/");
        } else {
            console.log("로그인 에러");
            setModalOpen(true);
        }

3. 로컬 스토리지 로그인 여부를 확인하여 context 값을 바꿔준다

//로컬스토리지 로그인 true false값을 통해 contextAPi값을 변경해준다.
    const isLoginStr = window.localStorage.getItem("isLoginSuv");
    if(isLoginStr==="TRUE"){
        setIsLogin("TRUE");
    }


//********기존 ContextApi로 받아오던 {userId} 값 대신 {isUserIdSrt} 를 사용한다.*******
const isUserIdSrt = window.localStorage.getItem("userIdSuv");
{isUserIdSrt}