2.Routes

라우터란?

웹 개발 맥락에서 라우터는 들어오는 요청을 웹 애플리케이션의 적절한 처리기 또는 컨트롤러로 라우팅하는 데 도움이 되는 소프트웨어 구성 요소 또는 프레임워크다. 응답을 생성하는 특정 작업이나 기능에 서로 다른 URL 또는 경로를 매핑하는 방법을 결정하는 트래픽 디렉터 역할을 한다.

1. URL 라우팅: 라우터의 주요 책임은 URL 또는 경로를 웹 애플리케이션 내의 특정 작업 또는 핸들러에 매핑하는 것이다. 사용자가 특정 URL을 요청하면 라우터는 URL을 검사하고 해당 요청을 처리하기 위해 실행해야 하는 코드를 결정한다. 이를 통해 개발자는 응용 프로그램에서 다양한 경로를 처리하기 위한 논리적이고 조직적인 구조를 만들 수 있다.

2. 처리기 또는 컨트롤러 매핑: 라우터는 URL과 해당 URL을 처리하기 위해 실행해야 하는 코드 사이의 연결을 설정한다. 특정 URL 또는 패턴을 해당 처리기 또는 컨트롤러 기능과 연결하는 규칙 또는 매핑을 정의한다. 요청이 정의된 경로와 일치하면 관련 처리기 또는 컨트롤러가 호출되어 적절한 응답을 생성한다.

3. 경로 매개변수: 라우터는 URL의 동적 세그먼트를 추출하여 핸들러 또는 컨트롤러 기능에 매개변수로 전달할 수 있는 경로 매개변수 개념을 지원하는 경우가 많다. 예를 들어 블로그 애플리케이션에서 "/posts/:id"와 같은 경로는 제공된 ID를 기반으로 특정 블로그 게시물을 가져와 표시하는 핸들러 함수에 매핑될 수 있다.

4. HTTP 방법: 라우터는 요청에 사용되는 HTTP 방법(예: GET, POST, PUT, DELETE)을 고려하여 적절한 처리기 또는 컨트롤러 기능을 결정한다. 이를 통해 동일한 URL에서 서로 다른 액션을 서로 다른 HTTP 메서드와 연결할 수 있다. 예를 들어 "/users"에 대한 GET 요청은 사용자 목록을 검색할 수 있는 반면 동일한 URL에 대한 POST 요청은 새 사용자를 생성할 수 있다.

5. 미들웨어 통합: 라우터는 종종 미들웨어 기능을 지원한다. 미들웨어 기능은 메인 핸들러 또는 컨트롤러 기능 전후에 실행할 수 있는 중간 기능이다. 인증, 데이터 유효성 검사, 로깅 또는 오류 처리와 같은 작업을 수행할 수 있다. 미들웨어 기능은 일반적으로 순차적으로 실행되므로 개발자가 특정 순서로 실행되도록 여러 기능을 모듈화하고 연결할 수 있다.

6. 중첩 라우팅: 라우터는 중첩 또는 계층적 라우팅을 지원할 수 있으므로 개발자가 경로 내에서 경로를 정의할 수 있다. 이는 다양한 기능, 모듈 또는 구성 요소를 기반으로 애플리케이션의 경로를 구성하고 구조화하는 데 도움이 된다. 중첩된 라우팅을 통해 더 나은 코드 구성과 문제 분리가 가능한다.

7. 프레임워크 통합: 라우터는 일반적으로 웹 개발 프레임워크에서 URL 라우팅을 처리하는 데 사용된다. Node.js용 Express.js, Python용 Django 또는 Ruby on Rails와 같은 프레임워크는 경로 정의 및 관리 프로세스를 단순화하는 내장 라우터를 제공한다. 이러한 프레임워크는 종종 경로 그룹화, 경로 이름 지정 및 경로 매개변수 유효성 검사와 같은 추가 기능을 제공한다.

전반적으로 라우터는 들어오는 요청을 정의된 경로를 기반으로 적절한 코드 핸들러 또는 컨트롤러로 보내 웹 애플리케이션에서 중요한 역할을 한다. 다양한 URL 및 HTTP 메서드를 처리할 수 있는 구조적이고 유연한 방법을 제공하여 개발자가 복잡하고 조직화된 웹 애플리케이션을 쉽게 구축할 수 있도록 한다.

React Router

React Router는 React 애플리케이션에서 라우팅을 처리하기 위한 강력한 라이브러리다. 개발자가 다양한 URL을 특정 구성 요소 또는 보기에 매핑하여 동적이고 탐색 가능한 사용자 인터페이스를 만들 수 있도록 하는 구성 요소 및 유틸리티 집합을 제공한다. React Router는 소규모 및 대규모 React 프로젝트 모두에서 널리 사용된다.

다음은 React Router의 주요 구성 요소 및 기능이다.

1. BrowserRouter: 이 구성 요소는 HTML5 히스토리 API를 사용하여 라우팅 기능을 제공한다. URL의 변경 사항을 수신하고 정의된 경로를 기반으로 적절한 구성 요소를 렌더링한다. 일반적으로 응용 프로그램의 최상위 구성 요소로 사용된다.

2. Route: 경로 구성 요소는 애플리케이션 내에서 개별 경로를 정의하는 데 사용된다. 경로와 해당 경로가 일치할 때 렌더링할 구성 요소를 지정한다. 예를 들어 <Route path="/home" element={<Home />} />은 URL이 "/home"과 일치할 때 홈 구성 요소를 렌더링한다.

3. Link 및 NavLink: 이러한 구성 요소를 사용하면 애플리케이션 내에서 서로 다른 경로 사이를 쉽게 탐색할 수 있다. 링크 구성 요소는 앵커 태그를 렌더링하고 페이지를 새로 고치지 않고 URL 변경을 처리한다. NavLink 구성 요소는 Link와 유사하지만 현재 활성 경로를 기반으로 스타일 또는 클래스를 추가할 수 있다.

4. Routes: Routes 구성 요소는 첫 번째로 일치하는 경로를 독점적으로 렌더링하는 데 사용된다. 여러 경로를 동시에 렌더링하는 것을 방지하는 데 도움이 된다. 한 번에 하나의 경로만 일치하고 렌더링되도록 하려면 경로를 Routes 구성 요소로 래핑해야 한다.

5. Route Parameters: React Router는 동적 경로 매개변수(Dynamic Route Parameters)를 지원하므로 개발자가 가변 세그먼트로 URL 패턴을 정의할 수 있다. 매개변수는 경로 경로에서 매개변수 이름 뒤에 콜론을 사용하여 표시된다. 예를 들어 <Route path="/users/:id" element={<User />} />는 "/users/123"과 같은 모든 URL과 일치하고 "123" 값을 사용자 구성 요소에 매개 변수로 전달한다.

6. 중첩 라우팅(Nested Routing): React Router는 서로의 중첩 경로를 허용하여 개발자가 복잡한 라우팅 구조를 만들 수 있도록 한다. 중첩 경로는 <Route> 구성 요소를 다른 <Route> 구성 요소 안에 배치하여 정의할 수 있다. 이렇게 하면 응용 프로그램의 다른 섹션 또는 기능을 기반으로 경로를 쉽게 구성할 수 있다.

7. 프로그래밍 방식 탐색: React Router는 프로그래밍 방식 탐색을 허용하는 후크와 기능을 제공한다. useNavigate 후크는 navigate('/') 또는 navigate(-1)와 같은 함수를 사용하여 다른 경로를 탐색하는 데 사용할 수 있는 기록 개체에 대한 액세스를 제공한다.

8. 루트 가드(Route Guards): React Router는 루트 가드 또는 인증 확인을 구현하기 위한 메커니즘도 제공한다. 상위 구성 요소 또는 사용자 지정 구성 요소로 경로를 래핑함으로써 개발자는 인증 상태 또는 기타 조건에 따라 특정 경로에 대한 액세스를 제어할 수 있다.

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

Browser Router

<BrowserRouter>는 브라우저의 주소창에 깨끗한 URL을 사용하여 현재 위치를 저장하고 브라우저에 내장된 히스토리 스택을 사용하여 탐색한다.

<BrowserRouter>은 기본적으로 현재 문서의 기본 뷰를 사용하지만, 예를 들어 <iframe>에서 다른 창의 URL에 대한 변경 사항을 추적하는 데 사용할 수도 있다.

Route

라우트는 아마도 React 라우터 앱에서 가장 중요한 부분일 것이다. URL 세그먼트와 컴포넌트, 데이터 로딩 및 데이터 변형을 연결한다. 경로 중첩을 통해 복잡한 애플리케이션 레이아웃과 데이터 종속성을 단순하고 선언적으로 만들 수 있다.

Memory Router

MemoryRouter는 React 애플리케이션 내에서 메모리 내 라우팅을 가능하게 하는 React Router에서 제공하는 구성 요소이다. 브라우저의 URL 및 기록 API를 활용하는 BrowserRouter 또는 HashRouter와 달리 MemoryRouter는 실제 브라우저 URL에 영향을 주지 않고 라우팅 상태를 메모리에 저장한다.

1. 메모리 내 라우팅(In-Memory Routin): MemoryRouter는 주로 테스트 또는 브라우저의 URL을 변경하지 않고 라우팅 상태를 관리하려는 시나리오에 사용된다. URL이나 브라우저 기록이 아닌 메모리에 라우팅 정보를 저장한다.

2. 브라우저 종속성 없음(No Browser Dependency): MemoryRouter는 <BrowserHistory> 및 <HashHistory>와 달리 브라우저의 히스토리 스택과 같은 외부 소스와 독립적이다. 서버 측 렌더링 또는 테스트 프레임워크와 같이 브라우저의 URL을 직접 조작하는 것이 불가능하거나 바람직하지 않은 환경에서 사용할 수 있다.

3. 라우팅 구성(Routing Configuration): 다른 라우터 구성 요소와 유사하게 MemoryRouter를 사용하면 <Route> 구성 요소를 사용하여 경로를 구성할 수 있다. 원하는 경로와 구성 요소를 MemoryRouter 구성 요소의 자식으로 정의한다.

4. 경로 렌더링(Route Rendering): MemoryRouter는 정의된 경로를 기반으로 일치하는 경로와 관련된 구성 요소를 렌더링한다. 경로 경로가 현재 URL(메모리에 저장된 대로)과 일치하면 연결된 구성 요소가 렌더링된다. MemoryRouter는 브라우저의 URL이나 탐색 동작을 변경하지 않다.

5. 히스토리 객체(History Object): MemoryRouter는 BrowserRouter 또는 HashRouter와 유사한 히스토리 객체를 제공한다. 그러나 이 기록 개체는 메모리에 있으며 브라우저의 기록에 영향을 주지 않는다. 프로그래밍 방식으로 탐색하거나 경로 변경 사항을 듣거나 애플리케이션 내에서 라우팅 상태를 조작할 수 있다.

6. 위치 객체(Location Object): MemoryRouter는 애플리케이션 메모리 내에서 현재 URL을 나타내는 위치 객체를 유지한다. 여기에는 현재 경로에 대한 정보를 제공하는 경로 이름, 검색, 해시 및 상태와 같은 속성이 포함된다.

MemoryRouter는 브라우저의 URL을 변경하지 않고 React 애플리케이션 내에서 라우팅을 관리해야 하는 테스트 및 시나리오에 유용한 도구이다. 메모리 내 라우팅을 허용하고 다른 라우터 구성 요소에 유사한 API를 제공하여 서로 다른 환경에서 서로 다른 라우터 구현 간에 쉽게 전환할 수 있다.