리액트 라우터 기본 개념과 AppRouter.js 사용법

 

AppRouter.js는 React 애플리케이션에서 사용자가 특정 URL로 이동했을 때 어떤 화면을 보여줄지를 결정하는 역할을 하는 핵심 파일입니다. 흔히 "라우터"라고 부르며, 클라이언트 사이드 라우팅(Client-side Routing)을 구현하기 위한 설정이 담겨 있습니다. 이를 통해 페이지 간 이동이 이루어질 때 전체 페이지를 새로고침하지 않고도 필요한 컴포넌트만 렌더링하여 사용자 경험을 부드럽게 만들어줍니다.

 

1. AppRouter.js의 기본 역할

AppRouter.js는 URL과 화면 컴포넌트를 연결하는 '길안내 지도'와도 같습니다. 사용자가 특정 URL로 접근했을 때 어떤 React 컴포넌트를 렌더링할지 매핑(mapping)하는 기능을 담당하며, 이를 통해 애플리케이션의 페이지 구조를 정의합니다.

 

 

2. 코드로 보는 역할 이해

아래는 AppRouter.js의 간단한 예제 코드입니다.

import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

const AppRouter = () => (
    <Routes>
        {/* 사용자가 '/' (홈) 으로 가면 <Home /> 컴포넌트를 보여줌 */}
        <Route path="/" element={<Home />} />
        
        {/* 사용자가 '/about' 으로 가면 <About /> 컴포넌트를 보여줌 */}
        <Route path="/about" element={<About />} />
    </Routes>
);

 

이 코드는 두 가지 URL을 처리합니다:

1. / → Home 컴포넌트를 렌더링
2. /about → About 컴포넌트를 렌더링

예를 들어 사용자가 브라우저 주소창에 www.yoursite.com을 입력하면 Home 컴포넌트가 화면에 나타나며, www.yoursite.com/about으로 접속하면 About 컴포넌트가 표시됩니다.

 

 

3. 동작 원리 및 실제 사용 예시

AppRouter.js는 단순히 URL에 맞는 컴포넌트를 매칭하는 것만이 아니라, React 애플리케이션에서 전반적인 페이지 이동의 흐름을 관리합니다.

• 사용자가 특정 URL로 접속: 브라우저의 주소창에 입력된 URL이 AppRouter.js에서 설정한 경로(path)와 일치하면 해당 경로에 연결된 컴포넌트가 화면에 렌더링됩니다.
• 예시:
• www.yoursite.com → Home 컴포넌트 표시
• www.yoursite.com/about → About 컴포넌트 표시

 

 

4. Navbar와의 연동

라우터를 효과적으로 활용하려면 Navbar와 같은 네비게이션 컴포넌트를 함께 사용할 수 있습니다. 이를 통해 사용자는 클릭만으로 손쉽게 페이지를 전환할 수 있습니다.

const Navbar = () => (
    <nav>
        <ul>
            {/* Link 컴포넌트를 클릭하면 해당 경로로 이동 */}
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
        </ul>
    </nav>
);

 

위 코드에서 Link 컴포넌트는 React Router의 기능으로, 클릭 시 새로고침 없이 URL을 변경하고 AppRouter.js의 설정에 따라 적절한 컴포넌트를 렌더링합니다.

 

 

5. 라우터 관련 용어와 파일명

AppRouter.js는 다양한 프레임워크에서 동일한 개념으로 사용되며, 이름이나 설정 방식만 약간씩 다를 뿐 기능은 유사합니다.

• Router: 경로(route)를 정의하고 관리하는 기본 파일
• Route Configuration: 경로와 컴포넌트를 매핑하는 설정
• Routing Module: Angular 등에서 사용하는 용어
• Route Manager: 경로 관리 역할을 강조한 명칭

 

프레임워크별 일반적인 파일명:

• React: AppRouter.js, Router.js, Routes.js
• Vue: router.js, routes.js
• Angular: app-routing.module.ts

 

이 모든 파일은 클라이언트 사이드 라우팅을 구현하는 데 중요한 역할을 합니다.

예를 들어 React에서는 React Router 라이브러리를 사용해 AppRouter.js를 구현하며, Angular에서는 Angular Router를 사용해 비슷한 기능을 수행합니다.

 

6. AppRouter.js가 중요한 이유

• 사용자 경험 개선: 페이지를 새로고침하지 않고 컴포넌트만 전환하여 부드럽고 빠른 페이지 전환이 가능합니다.
• 효율적인 코드 관리: URL과 컴포넌트를 한 곳에서 관리해 유지보수가 용이합니다.
• 확장성: 새로운 페이지를 추가하거나 경로를 수정할 때 AppRouter.js에서 간단히 설정할 수 있습니다.

 

결론적으로 AppRouter.js는 React 애플리케이션의 사용자 경험과 코드 구조를 효율적으로 관리하기 위해 없어서는 안 되는 필수 구성 요소입니다.