Project Zero 2. react-router-dom

 프로젝트 프론트로 React를 사용하고, 처음부터 문제를 마주쳤다. 페이지 라우팅이 필요했다. 얼른 구글에 검색해서 라우팅 할 수 있는 방법을 찾았고, 바로 react-router-dom이다. 이 글을 통해서 라우팅을 지정한 과정을 간략하게 소개하겠다.

 

프로젝트 초기 코드

// index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 나는 index.js에서 바로 라우팅을 했다. 다른 컴포넌트로 구분하여하는 경우도 있었는데, 아직은 라우팅이 많지 않고, 추가적인 컴포넌트를 제작하는 건 한편으로 낭비라고 생각했다. 위의 코드는 create-react-app을 사용하여 제작된 초기 코드이고, 여기서 하나하나씩 추가했다.

react-router-dom적용

import { BrowserRouter, Route, Routes } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <h1>Project Zero</h1>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/blog/" element={<Blog />} />
    </Routes>
  </BrowserRouter>
);

 react-router-dom에서 BrowserRouter, Routes, Route를 불러온다.

 BrowserRouter는 라우팅을 위해 권장되는 컴포넌트이다. 라우팅을 하고 싶은 컴포넌트들의 최상단에 배치하면 된다.

 Routes와 Route를 활용하여 라우팅을 수행하는데, Route는 if조건문처럼 각 주소가 주어진 path와 일치하면 해당 컴포넌트로 라우팅을 하고, 이러한 Route를 Routes가 감싸도록 배치하면 된다.

 추가적으로 라우팅을 지정하고 활용하려는 과정에서 컴포넌트 구조를 한 번 정리할 필요가 있을 것 같았다.

 위와 같이 index에서 시작하여 라우팅은 Main, Blog, Accout컴포넌트로 하고, 공통 컴포넌트로 header, footer를 사용하는 방향으로 구성해보았다. 이를 코드에 적용하면 다음과 같이 구성된다.

import { BrowserRouter, Route, Routes } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <h1>Project Zero</h1>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/blog/" element={<Blog />} />
      <Route path="/account/" element={<Account />} />
    </Routes>
  </BrowserRouter>
);

 그리고 컴포넌트를 담은 폴더구조는 다음과 같다.

 여기서 여러가지 방법을 논하는 글들이 많았고, 어떠한 방식을 선택하는 것이 더욱 좋을지 고민되었다. 더 많이 작성했다가 복잡해지는 것이 아닌가, 효율성도 고려해야 하는가 등의 내용이었다. 그런데 React 공식문서에서 다음글귀를 발견하였고, 마음 편하게 구성해보았다.

이제 막 프로젝트를 시작하는 단계라면 파일 구조를 선택하는 것에 있어서 5분 이상 시간을 투자하지 마세요.

 예전 Django, FastAPI를 활용할 때도 고민했던 내용이다. 그런데 명확한 기준이 없고, 또 한편으로는 파일이 많이 않은 단계일 때는 내가 이해할 수 있는 또는 팀이 잘 활용할 수 있는 구조를 따르면 된다고 생각한다. 내가 작성한 위의 구조는 백엔드 코드를 구성할 때 기준이 되는 큰 덩어리끼리 묶어가는 방식으로 했는데, 다른 누군가가 확인하면 조금은 이상하다고 느낄 수 있을 것 같다. 하지만 지금은 내가 잘 이해하고 활용할 수 있는 구조를 선택했다.

 여기서 그치지 않고 react-router-dom의 한가지 기능을 더 활용했다. HTML의 a태그를 활용한 링크를 사용하면 페이지 전체가 렌더링이 된다. 이를 방지하기 위해 Link를 활용할 수 있다. 그 결과는 아래와 같다.

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Header />
    <h1>Project Zero</h1>
    <Link to={"/"}>Main</Link>
    <br />
    <Link to={"/blog/"}>Blog</Link>
    <br />
    <Link to={"/account/"}>account</Link>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/blog/" element={<Blog />} />
      <Route path="/account/" element={<Account />} />
    </Routes>
    <Footer />
  </BrowserRouter>
);

 

생각 정리

 React를 활용하여 프로젝트를 구성해보는게 처음이라 아직 미숙한 부분이 많다. 당연히 시간을 두고 공부하는 것이 최선일 것이다. 한편으로 다행이라고 생각하는 부분은, 프로젝트를 구성하는 과정이 즐겁다. 프론트를 어떻게 구성할지는 조금 막막하지만, 또 한편으로는 어떻게든 해결되지 않을까 생각한다.