Route Groups, Dynamic Routes, searchParams & File based Routing

개요 : React에서의 routing

React.js에서는 routing을 위해서 react-router-dom을 설치해야한다. (현재 최신 버전은 6.2)

React에서는 routing을 아래처럼 코딩을 해야한다.

import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/orders" element={<Orders />} />
      </Routes>
    </Router>
  )
}

export default App;

 

위의 코드는 별거 아니지만, E-commerce에서 Nested Routing이 들어가는 순간 코드는 어마어마하게 길게 될 수 있다. router package도 다운로드 받을 뿐 아니라 코드도 복잡해진다. 이를 위해 Next.js (Nuxt.js ver.3도)는 File-based routing을 out of the box로 지원해준다.

 

File-based routing

폴더는 uri 이름, 파일은 page.tsx로 작성한다.

uri 이름이므로 kebab-case로 폴더 이름을 생성하면 된다. (필수는 아니지만 대세)

예시: app/brand-name/page.tsx

React처럼 react-router-dom과 같은 패키지를 import하지 않고도 자동으로 지원된다.

 

Dynamic Routes

Next.js에서는 dynamic routes도 어떠한 패키지 import 없이 기능을 자동으로 지원해준다.

폴더 이름을 대괄호( [ ]: square brackets )로 묶으면 Dynamic Routes가 된다.

이름은 관행상 slug를 주로 쓰지만 다른 이름이어도 상관없다.

예시: app/category/[categoryname]/page.tsx

import React from "react";

const Page = ({ params }: { params: { categoryname: string } }) => {
  return (
    <div>
      <h1>{params.categoryname}</h1>
    </div>
  );
};

export default Page;

 

위에처럼 params라는 props를 지정해주면 자동으로 [slug]에 어떤 단어가 들어와있는지 읽어온다.

http://localhost:3000/category/test 를 입력하면 'test'라는 글씨가 렌더링된다.

 

Route Groups

폴더 이름에 괄호 ()를 치면 file-based routing에 전혀 영향을 미치지 않으면서 IDE 상에서만 폴더를 깔끔하게 정리할 수 있는 기능이다.

물론 단순한 '폴더 정리' 외에도 해당 폴더에 공통 layout.tsx를 설정할 수 있는 기능도 사용할 수 있다.

폴더 구조가 아주 복잡한 e-commerce같은 큰 프로젝트에서는 꼭 필요한 기능이라 할 수 있다.

 

예시:

app/(auth)/
     ┣ sign-in/
     ┃    ┗ page.tsx
     ┣ sign-out/
     ┃    ┗ page.tsx
     ┗ layout.tsx

 

위에서 layout.tsx를 생략해도 된다.

그러면 그냥 localhost:3000/sign-in 과 localhost:3000/sign-out으로 라우팅이 된다.

그러나 위처럼 (auth)만의 공통 layout.tsx를 설정하면 반드시 아래처럼 children을 받아 리턴해주어야 한다.

import React from "react";

const Layout = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};

export default Layout;

 

 

searchParams

만약 http://localhost:3000/search?id=5 와 같은 것은 Next.js에서 uri를 어떻게 읽어올 수 있을까?

이것도 역시 어떠한 패키지 import 없이 다음과 같이 읽어올 수 있다.

const Page = ({
  searchParams,
}: {
  searchParams: { id: string | undefined };
}) => {
  return (
    <div>
      <h1>{searchParams.id}</h1>
    </div>
  );
};

export default Page;