복잡한 경로 관리는 그만! React 프로젝트에서 라우터 구조와 절대경로 설정 정리하기

안녕하세요 웹파트 YB 문혜성입니다!

4주차 세미나에서는 라우터 설정하는 법에 대해 학습했었는데요 마침!! 합동 세미나에서 초기 환경 세팅을 하며 실제로

해당 내용을 실전에서 직접 구상해보며 이 주제에 대한 관심이 더욱 깊어졌습니다.

따라서 이번 글에서는 세미나에서 배운 내용을 바탕으로 React 프로젝트에서 라우터 구조를 효율적으로 관리하는 방법과

절대경로 설정을 통해 협업과 유지보수를 수월하게 만드는 팁을 정리해보았습니다. ✨

---

📁 1. 라우터 구조를 분리하는 이유

React Router를 사용할 때, 컴포넌트 내에서 Route를 직접 나열하는 방식은 소규모 프로젝트에서는 큰 문제가 없지만,

규모가 커지면 다음과 같은 문제가 발생합니다.

• 라우트 수가 많아질수록 가독성이 급격히 떨어짐
• 새로운 페이지가 추가될 때마다 여러 파일을 수정해야 함
• 다른 사람이 만든 라우팅 구조를 파악하는 데 시간이 오래 걸림

이런 문제를 해결하기 위해 다음과 같이 라우터 관련 파일을 분리해 구성하는 방식을 추천드려요 👍

📁 src
 ┣ 📁 pages
 ┣ 📁 routes
 ┃ ┣ Router.tsx
 ┃ ┣ routePath.ts
 ┃ ┗ pageRoutes.ts

 

---

🛠️ 2. 라우터 구성 파일 예시

1) routePath.ts: 경로 상수 정의

export const ROUTE_PATH = {
  HOME: "/",
  ABOUT: "/about",
  PRODUCT_DETAIL: "/product/:id",
};

 

2) pageRoutes.ts: 경로와 컴포넌트 매핑

import { ROUTE_PATH } from "./routePath";
import Home from "@/pages/Home/Home";
import About from "@/pages/About/About";

export const pageRoutes = [
  { path: ROUTE_PATH.HOME, element: <Home /> },
  { path: ROUTE_PATH.ABOUT, element: <About /> },
];

 

3) Router.tsx: useRoutes로 실제 라우터 적용

import { useRoutes } from "react-router-dom";
import { pageRoutes } from "./pageRoutes";

const Router = () => {
  const routes = useRoutes(pageRoutes);
  return routes;
};

export default Router;

 

이렇게 구성해두면 라우팅 구조가 한눈에 들어오고, 페이지가 늘어나도 기존 라우터 파일을 크게 건드리지 않아도 되기 때문에 협업이나 유지보수에 매우 유리하다고 해요! 딱 봐도 그래보이지 않나요~~😏

---

🔗 3. 절대경로(alias) 설정으로 경로 지옥 탈출하기

React 프로젝트에서는 상대경로(../../../components/...)가 길어지면 코드의 가독성과 유지보수성이 떨어지게 됩니다.

이를 해결하기 위해 절대경로 alias 설정을 도입할 수 있어요.

 

✅ 1단계: vite.config.ts 설정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

 

✅ 2단계: tsconfig.json에도 반영

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

 

이렇게 하면 프로젝트 내 어디에서든 동일한 방식으로 경로를 사용할 수 있어 가독성이 높아지고, 파일 위치가 바뀌어도 수정할 경로가 줄어들어요!

 

---

💡 마무리하며

초기 세팅 과정에서 다소 복잡하게 느껴질 수 있는 라우터 구성과 절대경로 설정이지만, 한 번 구조를 잘 잡아두면

프로젝트가 커지더라도 효율적으로 관리할 수 있습니다.

특히 협업 프로젝트에서는 이러한 구조화 작업이 전체 작업 흐름을 훨씬 원활하게 만들어주기 때문에

앞으로도 프로젝트 시작 단계에서 꼭 챙기고 싶은 설정 중 하나가 되었어요 🥺

여러분에게도 이 글이 초기 세팅을 조금 더 수월하게 시작하고, 더 깔끔한 구조를 만드는 데에 도움이 되었기를 바래요 🙌

 

 

출처: https://yan9woojin.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-React-Router-v6160-%EA%B3%B5%EC%8B%9D-%EB%AC%B8%EC%84%9C-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC