2024/08/01 2

[React] 공개 라우트와 비공개 라우트

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 RequireAuth 컴포넌트를 사용해 비공개 라우트를 보호하고, Layout 컴포넌트를 통해 공통 레이아웃을 정의한다.useAuth.tsximport type {FC, PropsWithChildren} from "react";import {createContext, useCallback, useContext, useState} from "react";import * as U from "../utils";// L..

Javascript/React 2024.08.01

[React] 리액트 라우터

react-router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리할 수 있게 도와주는 라이브러리이다.React Router의 주요 기능경로 기반 라우팅: URL 경로에 따라 다른 컴포넌트를 렌더링 한다.네스티드 라우팅: 라우트 안에 라우트를 중첩하여 복잡한 내비게이션을 구현한다.동적 라우팅: URL 매개변수를 사용하여 동적인 콘텐츠를 처리한다.프로그램적 내비게이션: 코드에서 직접 내비게이션을 제어할 수 있다.라우트 보호: 인증 및 권한 관리를 통해 특정 라우트 접근을 제어한다.설치npm i react-router Routes, Route, LinkRoutesRoutes는 React Router v6에서 도입된 새로운 컴포넌트로, 라우트의 집합을 정의하는 역할을 한다. 이전 버전에서는 S..

Javascript/React 2024.08.01
728x90