정훈's 프로그래밍

아래는 React와 TypeScript를 사용하여 로그인 후 인증 정보를 관리하는 예시 코드입니다. 이 예제에서는 Context API와 커스텀 훅을 사용해 전역 인증 상태를 관리하며, localStorage에 토큰을 저장해 새로고침 시에도 인증 정보를 유지할 수 있도록 합니다.1. 인증 Context 및 Provider 생성먼저, 인증 정보를 담을 Context와 Provider를 만듭니다.파일: src/contexts/AuthContext.tsximport React, { createContext, useState, useEffect, ReactNode } from 'react';// 사용자 정보 타입 정의 (필요에 따라 확장 가능)interface User { id: number; name: s..

아래는 React Router와 앞서 만든 인증 로직(예: Context, useAuth 훅 등)을 활용하여, 페이지에 진입하기 전에 인증 여부를 확인하고 인증되지 않은 경우 경고창을 띄운 후 로그인 페이지로 리다이렉트하는 예시입니다.1. ProtectedRoute 컴포넌트 만들기설명:ProtectedRoute 컴포넌트는 자식 컴포넌트를 렌더링하기 전에 useAuth를 통해 로그인 여부를 체크합니다. 인증되지 않은 상태라면 alert 창을 띄운 후 로그인 페이지로 이동시킵니다.파일: src/components/ProtectedRoute.tsximport React from 'react';import { Navigate } from 'react-router-dom';import { useAuth } fro..