[Next.js/코딩애플] React에서 Next.js로의 라우팅 변화 (feat. Dynamic Route)

프론트엔드 개발에 있어 React는 가장 중요한 도구 중 하나입니다.

그러나 React는 라우팅 기능을 기본적으로 제공하지 않기 때문에,

개발자들은 라우팅을 위해 'react-router-dom'과 같은 별도 라이브러리를 별도로 사용해 왔습니다.

 

1. React의 라우팅

React Router는 널리 사용되는 React의 라우팅 라이브러리로, 사용자가 URL을 통해 어플리케이션 내 이동할 수 있도록 돕습니다.

React에서는 아래와 같이 라우팅을 설정할 수 있습니다.

import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

<Router>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
</Router>

위 예시에서는 Route 컴포넌트의 'path' 속성을 통해 URL 경로를 지정하고,
'component' 속성을 통해 해당 경로에 연결될 컴포넌트를 지정합니다.

사용자가 '/'(루트)에 접근하면 Home 컴포넌트가, '/about'에 접근하면 About 컴포넌트가 렌더링 됩니다.

 

React의 라우팅은 페이지 단위 라우팅을 위해 라이브러리를 추가 설치해야 하며,

페이지마다 라우팅을 설정해야 한다는 번거로움이 있습니다.

 

2. Next.js의 기본 라우팅

이러한 번거로움을 해결하기 위해 Next.js는 파일 시스템 기반의 라우팅을 도입하여,

app 디렉터리 내부에 폴더 및 파일을 생성함으로써 라우트를 자동 설정할 수 있습니다.

 

예를 들어, app이라는 최상위 폴더 내에 list 폴더 생성 및 page.js 파일 생성만으로

아래와 같이 /폴더명 URL로 이동하여 해당 페이지를 볼 수 있습니다.

 

이처럼 Next.js는 라우팅을 보다 간편하게 만들어줍니다.

 

3. Next.js의 Dynamic Route

하지만 모든 웹 어플리케이션의 라우팅이 정적이지 않기 때문에 (예를 들어 게시판의 게시물은 고유한 URL을 가져야 한다.)

Next.js에서는 Dynamic Route 기능을 제공합니다.

Dynamic Route는 디렉터리 혹은 파일의 이름을 [대괄호]로 감싸 사용할 수 있습니다.

 

예를 들어 아래와 같이 /detail/[id]/page.js 디렉터리와 폴더를 만들어두면

/detail/아무문자 로 접속할 때마다 page.js의 내용을 동일하게 보여줍니다. (진짜 아무문자 아무거나...)

 

아래와 같이 /detail/1, detail/100으로 접속해도 같은 내용의 page.js이 렌더링 됩니다.

 

🧖‍♀️ 마무리

웹 어플리케이션의 규모가 커지고, 사용자의 요구가 다양해질수록 Dynamic Route는 더 중요한 도구가 될 것 같습니다.

저도 처음에는 조금 복잡하게 느껴졌지만, Dynamic Route를 통해 더 다양한 서비스를 제공할 수 있기에

조금씩 꾸준히 익혀나갈 계획입니다. 궁금한 점이나 정정해야 할 내용이 있다면 댓글 남겨주세요 :)