[26.02.04] React 재직자 교육 3 - Login

  //로컬 스토리지에서 읽기

  useEffect(() => {

    // startTransition으로 감싸서 React 19의 경고 방지

    // React 19는 useEffect 내부의 동기적 setState를 경고함 (실행에는 영향 없음)

    // startTransition으로 감싸면 "transition 업데이트"로 마킹되어 경고 예외 처리됨

    // 감싼 코드는 즉시 실행되며, 렌더링 우선순위만 낮아짐  

    startTransition(() => {

      setUser(localStorage.getItem("user") || "");

      setAccessToken(localStorage.getItem("accessToken") || "");

      setIsLoading(false);

    });

  }, []);

 

startTransition으로 감싸면 에러가 안남...

 

  //로그인, 로그아웃시 런타임시 상태가 변경되면 로컬 스토리지 변경 및 Axios 설정 변경

  useEffect(() => {

    if(user !== "") { //로그인했을때

      localStorage.setItem("user", user);

      localStorage.setItem("accessToken", accessToken);    

      axiosConfig.addAuthHeader(accessToken);  

    } else { //로그아웃 했을때

      localStorage.removeItem("user");

      localStorage.removeItem("accessToken");

      axiosConfig.removeAuthHeader();

    }

  }, [user, accessToken]);

 

user, accessToken

가 바뀔때 콜백이 된다.

사용자의 아이디가 있을때 즉 로그인 했을때 로컬 스토리지에 setItem해준다.

 

 

"use client"

import { useContext, useState } from "react";
import { AuthContext } from "@/contexts/AuthContext";

function LoginForm() {
  const authContext = useContext(AuthContext);
  
  const [user, setUser] = useState("");

  const handleChange = (event) => {
    setUser(event.target.value);
  };

  const login = (event) => {
    authContext.setUser(user); //전역상태의 유저 바꿈
    authContext.setAccessToken("xxxxx");
    setUser(""); // 로그인 후 입력 필드 초기화 - 로그인폼의 유저바꿈
  };

  const logout = (event) => {
    authContext.setUser("");
    authContext.setAccessToken("");
    setUser(""); // 로그아웃 후 입력 필드 초기화
  };

  return (
    <div className="card">
      <div className="card-header">LoginForm</div>
      <div className="card-body">
        {authContext.user === "" ? (
          <div>
            <div className="form-group row">
              <label htmlFor="user" className="col-sm-2 col-form-label">User ID</label>
              <div className="col-sm-10">
                <input type="text" className="form-control" id="user"  name="user" value={user} onChange={handleChange}/>
              </div>
            </div>
            <button className="btn btn-info btn-sm" onClick={login}>로그인</button>
          </div>
        ) : ( 
          <button className="btn btn-info btn-sm" onClick={logout}>로그아웃</button>
        )}
      </div>
    </div>
  );
}

export default LoginForm;

 

로그인을 해도 로그아웃을 해도 user를 초기화하는 코드를 넣어주는게 좋다

Login.js에서 user을 바꿔줘도 localStorage에 들어갈까?

네!

AuthContext에서 

  //로그인, 로그아웃시 런타임시 상태가 변경되면 로컬 스토리지 변경 및 Axios 설정 변경

  useEffect(() => {

    if(user !== "") {

      localStorage.setItem("user", user);

      localStorage.setItem("accessToken", accessToken);    

      axiosConfig.addAuthHeader(accessToken);  

    } else {//로그아웃 했을때

      localStorage.removeItem("user");

      localStorage.removeItem("accessToken");

      axiosConfig.removeAuthHeader();

    }

  }, [user, accessToken]);

user와 accessToken이 바뀌면 리랜더링 된다.