9일차 React Router DOM(05~06장) - 생활코딩! React 리액트 프로그래밍

05 Nested Routing

06 수업을 마치며

 

Nested Routing은 Route가 하위 Route를 가지고 있는 구조를 말한다. 즉, 아래와 같다.

<Route path="/projects" element={<Projects/>}>
  <Route path=":project_id" element={<Project/>}/>
</Route>

 

교재에서는 Projects 내에서 자식 라우팅을 수행하도록 되어 있어 구조가 조금 다르다. 실습 코드와 함께 공유해 본다.

 
const projects = [
  { id: 1, name: "To-Do App", description: "A simple app to manage tasks.", tech: "React, CSS" },
  { id: 2, name: "Weather App", description: "Displays weather data using an API.", tech: "React, OpenWeather API" },
  { id: 3, name: "Portfolio", description: "This portfolio built with React.", tech: "React, CSS" }
];
 
function Project() {
  var prms = useParams();
  if(prms.project_id) {
    const project = projects.find(project => project.id === Number(prms.project_id))
    if(project) {
      return (
        <div key={project.id} className="project-card">
          <h2>{project.name}</h2>
          <p>{project.description}</p>
          <small>Tech: {project.tech}</small>
        </div>        
      );
    }
  }  
  
  return (<div>not found</div>);
}
 
function Projects() {
  const projectList = projects.map(project => (
    <li key={project.id}>
      <NavLink to={`/projects/${project.id}`}>{project.name}</NavLink>
    </li>
  ))
 
  return (
    <section className="section">
      <h1>Projects</h1>
      <div className="project-list">
        {projectList}
      </div>
      <Routes>
        <Route path="/:project_id" element={<Project/>}/>
      </Routes>
    </section>
  );
}
 
function App() {
  return (
    <Router>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects/*" element={<Projects />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/*" element={'Not Found'} />
        </Routes>
      </main>
    </Router>
  );
}

 

코드를 보면 먼저 맨위에서 /projects/* 을 매핑해서 Projects 컴포넌트를 invoke하고 그 안에서 /:project_id 를 매핑해서 분기한다. 즉, /projects 이면 projects 리스트 페이지를 /projects/1 이면 id 1을 가지고 프로젝트 설명을 보여주는 식이다.

 

그런데, 이 방식이 GPT와 이야기를 해보니 권장 방식은 아니라고 한다. 교재가 23년 판이고, 22년에 React Router v6.4가 공개되면서 비권장이 된 것이니 시기 상 애매하게 걸쳐 있게 되었다. FE 개발 기술이 구조부터 너무 쉽게 바뀌는 느낌을 역시 지울 수가 없다.

 

이 외에도 아마 Router DOM 쪽에 공부할 게 매우 많겠으나 입문이니 교재는 이 정도로 끝맺음이 되었다. 마지막 6장에서 SSR(Server-Side Rendering)에 관한 언급이 있는데 마지막 편이 Next.js이므로 살짝 맛보기나 해볼까 싶다.