Router

오늘은 프론트 작업을 하다가 사용하게된 Router에 대해서 포스팅 해보려 한다.

 

1. Router 란?

Router에 대해 알아보기전에 간단하게 라우팅(Routing)이란 개념을 알고 있어야 한다.

우리가 웹사이트를 이용하다보면 주소창에 " https://samtistory.tistory.com/70 " 처럼
도메인 뒤에 경로( "/1" 과 같은)가 붙은 경우를 자주 볼 수 있다.

이렇게 경로를 통해 어떤 페이지를 보여줄 것인가를 결정하는걸 라우팅이라고 한다.

 

즉, "현재 내가 어떤 화면(혹은 파일)에 위치해 있는가?"를 알려주는 역할을 하며,
라우팅을 담당하는 도구가 바로 Router이다.

 

2. 왜 Router 를 쓰는가?

프로젝트를 진행하다 보면 여러 화면을 구성해야 하는 상황이 자주 생긴다.
이럴 때 단순히 컴포넌트만 나눠서는 한계가 있다.

예를 들어, Header나 Footer는 고정된 채로,
URL 경로에 따라 특정 섹션만 바뀌는 구조를 만들고 싶다면
이걸 손수 구현하기보다는 react-router-dom 같은 Router 라이브러리를 사용하는 게 훨씬 깔끔하고 효율적이다.

react-router-dom을 사용하면 URL에 따라 어떤 컴포넌트를 보여줄지 쉽게 설정할 수 있고,
SPA(Single Page Application) 구조에서도 마치 페이지가 전환되는 것 같은 사용자 경험을 제공할 수 있다.

3.예제

먼저 터미널로 react-router-dom을 설치해준다.

npm install react-router-dom

 

 

오늘 준비한 예제는 간단하게 홈화면에서 상품페이지로 넘어가는 예제이다.

 

 

App.tsx

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

function App() {
  return (
    <BrowserRouter> {/* 라우팅 기능을 켜주는 부모 컴포넌트 */}
      <Routes> {/* 여러개의 Route를 감싸는 역할 */}
        <Route path="/" element={<Home />} /> {/* 경로가 루트("/") 일때 Home */}
        <Route path="/products" element={<Products />} /> {/* products 경로로 들어가면 Products 컴포넌트 보여줌 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

Home.tsx

import { useNavigate } from "react-router-dom"; // React Router 에서 제공하는 훅

const Home = () => {

  const navigate = useNavigate(); // 경로 이동시켜주는 함수 정의

  const handleTranslateProducts = () => { // 버튼 클릭시 실행되는 함수
    navigate("/products"); // /products경로로 이동
  };

  return (
    // component 가운데 정렬을 위한 style 코드
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        textAlign: "center",
      }}
    >
      <h1>홈 페이지</h1>
      <button onClick={handleTranslateProducts}>제품 페이지</button> {/* 제품 페이지로 넘어가기 위한 버튼 */}
    </div>
  );
};

export default Home;

 

 

Products.tsx

const Products = () => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        textAlign: "center",
      }}
    >
      <h1>제품 목록 페이지</h1>
    </div>
  );
};

export default Products;

 

 

 

실행결과

홈화면

제품 화면

 

 

홈 화면에서 버튼을 눌러 제품화면으로 이동할 수 있고 뒤로가기 했을 때에는 홈화면으로 돌아간다.

 

 

안드로이드 개발을 할 때는 Fragment를 사용해서
전체 액티비티를 바꾸지 않고 특정 영역만 교체하는 식으로 화면을 구성할 수 있었다.

웹 개발에서도 비슷한 방식으로 화면을 구성하고 싶었고,
이를 찾아보던 중 React Router를 사용하면
Header나 Footer는 고정된 채,
특정 컴포넌트만 URL에 따라 교체하는 구조가 가능하다는 걸 알게 되었다.

그래서 이 경험을 간단히 정리해 블로그에 남겨본다.