local storage 사용 이유

React는 새로고침하면 state가 사라지기 때문에 로그인 정보는 localStorage처럼 브라우저 저장소에 보존

• 새로고침해도 로그인 유지
• 보호 라우트에서 인증 체크 가능
• 유저 정보 다른 컴포넌트에서도 쉽게 사용 가능

유저 정보 저장 기능 분석

<aside> ✏️

• 로그인/회원가입 성공 → localStorage에 유저 정보 저장
• 페이지 이동해도 계속 로그인 상태 유지
• protected route 이용해 localStorage에 유저가 있으면 접근 허용

유저가 없으면 로그인 페이지로 리다이렉트

</aside>

Protected Route

<aside> 📌

인증된 사용자만 접근할 수 있도록 제한된 웹 페이지나 리소스 ****

예: authUser 있으면 course 페이지 허용, 아니라면 로그인 페이지 이동 ← 이러한 조건을 코드로 표현하는 것

유저 정보 저장 기능 흐름

<aside> 📌

• AuthContext로 로그인 사용자 정보를 전체 컴포넌트 전역에서 사용할 수 있도록 Provider
• localstorage에서 유저 정보 가져와 초기화
• useAuth 훅으로 쉽게 접근 </aside>

<aside> 📌

import { useAuth } 추가

• 유저 로그인 여부 확인 및 특정 페이지 보호 역할에 적합한 라우팅 담당 최상위 컴포넌트

ftontend/App.jsx

• 항상 화면 상단에 표시되는 영역인 컴포넌트

frontend/component/Navbar.jsx

</aside>

React Functional Componet 생성
   ↓
CreateContext( ) 생성
   ↓
AuthProvider({ children }) 내에 하위 컴포넌트 저장
   ↓
Provider로 감싸기
   ↓
모든 하위 컴포넌트에서 AuthContext 접근 가능

유저 정보 저장 기능 구현 코드

localStorage.setItem("Users", JSON.stringify(res.data.user));

로그인된 유저 정보 모든 컴포넌트가 공유 기능 구현 코드

import React, { createContext, useContext, useState } from "react";
// Context를 통해 로그인 정보(authUser)를 전체 앱에서 공유
export const AuthContext = createContext();

export default function AuthProvider({ children }) {
  const initialAuthUser = localStorage.getItem("Users");
  const [authUser, setAuthUser] = useState(
    initialAuthUser ? JSON.parse(initialAuthUser) : undefined
  );
  return (
    // Porvider로 감싸 authUser, setAuthUser를 모든 컴포넌트에서 사용 가능하게 전달
    <AuthContext.Provider value={{ authUser, setAuthUser }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

로그아웃 시 유저 정보 삭제 기능 구현 코드

import { useAuth } from "../context/AuthProvider";

function Logout() {
  const { authUser, setAuthUser } = useAuth();
    try {
      // 상태(유저 정보) 초기화
      setAuthUser({
        ...authUser,
        user: null,
      });
      //   로컬 스토리지에서 유저 제거
      localStorage.removeItem("Users");
.
.
.

기능 흐름 요약