React Router Dom

React-router-dom

• React 애플리케이션에서 클라이언트 측 라우팅을 처리하기 위한 라이브러리

BrowserRouter>와 Route

1. BrowserRouter

• 브라우저의 주소창과 상호작용하며 라우팅을 관리한다.

2. Route

• 특정 경로에 대한 렌더링 규칙을 정의한다.

3. 라우터 구성

• Route 컴포넌트를 사용하여 URL 경로에 대한 매핑 및 렌더링을 정의한다.
• 중첩된 Route를 사용하여 복잡한 라우팅 구조를 구성함

React-router-dom 동적 라우팅

• 정해지지 않은 URL 요청이 param으로 들어오더라도 동일한 페이지로 라우팅할 수 있다.
• 'useParams' 훅을 사용하여 입력된 param을 파악한다.

React-router-dom 중첩된 라우트

• 하나의 라우트 내부에 다른 라우트를 포함하는 구조
• 복잡한 UI 구조를 명확하게 표현할 수 있다.

React-router-dom Link와 NavLink

• 애플리케이션 내에서 탐색을 위한 링크를 생성하는 역할을 한다.
• NavLink는 현재 경로와 일치할 때 스타일 또는 클래스를 적용할 수 있다.

React-router-dom 프로그래매틱 네비게이션

• 'useNavigate' 훅을 사용하여 코드에서 탐색을 제어할 수 있다.

React-router-dom 검색 매개변수와 URL 파라미터

• 'useParams', 'useSearchParams' 훅을 사용하여 URL 파라미터와 검색 매개변수에 접근할 수 있다.

Outlet 컴포넌트

• 중첩된 라우트의 자식 컴포넌트를 렌더링하는 데 사용된다.
• 공통 레이아웃을 구현할 때 유용하다.

레이아웃 구성

• 공통 레이아웃을 유지하며 하위 페이지의 내용만 변경 가능하다.

권한 제어의 필요성

권한 제어는 프론트엔드 서비스에서 사용자의 요청에 대한 권한을 확인하고 제어하는 과정이다.

예시: 유저의 특정 요청에 대해 로그인 여부와 권한 유무를 확인하여 처리 여부를 결정한다.

권한 제어의 범위

• 권한 제어의 범위는 크게 두 가지로 나눌 수 있다.

1) API 요청 시 로그인 및 권한 확인

• 프론트엔드에서 서버에 요청 전에 토큰 유무를 확인하여 비용을 절감하고자 한다.
  2) 페이지 이동 시 로그인 및 권한 확인
• 중첩 라우팅 및 Outlet을 사용하여 특정 페이지 이동 시 권한을 확인한다.