dev) Route를 컴포넌트로 따로 관리하기

 

이번 프로젝트에서는 1차 프로젝트와 다르게 Route들을 컴포넌트화 하여 따로 관리하여

불필요하게 길어진 태그와 코드들을 효율적으로 정리해 보았다.

 

 

---

 

1. 기존의 방식

 

기존의 방식에 따른 수 많은 컴포넌트 import

기존의 Route 방식

 

기존의 Route방식에서는 위의 사진과 같이 path와 element값을 넣은(React-Router-Dom V6)

Route태그를 길게 나열하여 Route를 관리하였다.

 

하지만 해당 방식의 문제점은

 

1. import를 해야 하는 component가 너무 많아 가독성이 떨어진다.

2. 한 component내에서 한번에 너무 많은 route를 비효율적으로 render한다.

 

위와 같은 문제점을 가지고 있었다.

 

 

---

 

 

2. 바꾼 방식

 

따라서 위와 같은 문제점을 해결하기 위하여 React의 장점인 component를 활용하여 ROUTE를 따로 관리하기로 하였다.

 

1. ROUTE 컴포넌트를 생성하여 내부에 path와 link 그리고 element를 넣어 객체 리터럴로 export

2. 해당 객체들을 담은 ROUTE_ARR를 만들어 이후에 NavLink에 사용

 

import Home from "../../page/Home";
import CulturalEnv from "../../components/classify/CulturalEnv";
import Happiness from "../../components/classify/Happiness";
import LoginForm from "../../page/Login/LoginForm";
import RegisterForm from "../../page/Register/RegisterForm";
import UserForm from "../../page/User/UserForm";

export const ROUTE = {
  HOME: {
    path: "/",
    link: "/",
    element: Home,
  },
  CULTURAL_ENV: {
    path: "/CulturalEnv/",
    link: "/CulturalEnv",
    element: CulturalEnv,
  },
  HAPPINESS: {
    path: "/Happiness",
    link: "/Happiness",
    element: Happiness,
  },
  LOGINFORM: {
    path: "/LoginForm",
    link: "/LoginForm",
    element: LoginForm,
  },
  REGISTERFORM: {
    path: "/RegisterForm",
    link: "/RegisterForm",
    element: RegisterForm,
  },
  USERFORM: {
    path: "/UserForm",
    link: "/UserForm",
    element: UserForm,
  },
};

export const ROUTE_ARR = Object.values(ROUTE);

 

 

위와 같은 방식을 통하여 route들은 다른 기능을 하지 않는 하나의 컴포넌트 내에서 필요한 만큼 적히게 되며 유지보수가 필요할 시

이 안에서 해당하는 route를 찾아서 수정하거나 추가하면 된다.

 

 

import React from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import { ROUTE_ARR } from "../../components/Routers/ROUTE"
import Header from '../../components/Header.js';

const Main = () => {
  
  return (
    <div>
      <Router>
        <Header />
        <div>
        <Routes>
        {ROUTE_ARR.map((route, index) => {
          return (
            <Route path={route.path} element={<route.element />} key={index} />
          );
        })}
      </Routes>

        </div>
      </Router>
    </div>
  );
};

export default Main;

 

 

그 다음 ROUTE_ARR를 import 한 후, map함수를 이용하여 각 path와 element에 맞게 Route가 돌아가도록 적어 준다.

 

 

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import { ROUTE, ROUTE_ARR } from "../../src/components/Routers/ROUTE";


const Header = () => {
  ROUTE_ARR.find((el) => el.path === location.pathname);

  return (
    <div>
      <Container>
        <LogoStyled>
        <NavLink to={ROUTE.HOME.link}><img className="Logo" src="./logo192.png" alt="임시로고" /></NavLink>
        </LogoStyled>
        <NavStyled>
          <ButtonStyled>
              <NavLink to={ROUTE.HAPPINESS.link}>행복 지수</NavLink>
              <NavLink to={ROUTE.CULTURAL_ENV.link}>문화 환경</NavLink>
              <NavLink to ={ROUTE.LOGINFORM.link}>로그인</NavLink>
              <NavLink to ={ROUTE.REGISTERFORM.link}>회원가입</NavLink>
              <NavLink to ={ROUTE.USERFORM.link}>마이페이지</NavLink>
          </ButtonStyled>
        </NavStyled>
      </Container>
    </div>
  );
};

export default Header;

 

 

이후에 위와 같이 Header 컴포넌트안에 ROUTE와 ROUTE_ARR를 import하여 NavLink까지 걸어주면 정상적으로 페이지 이동까지 되는 것을 확인 할 수 있다. (ROUTE 내부에 적어준 객체 명과 link를 활용)

 

만약 상품등의 고유한 params를 가지고 있는 경우 link가 아닌 path값에 /:params를 넣어 path 또는 link로 선택하여 사용 하려고 한다.