처음 만난 Next.js 문서
3.1
Routing 기초
Routing은 웹사이트의 여러 페이지들 사이를 이동하는 것을 의미합니다. 우리가 웹사이트에서 링크를 누르면 다른 페이지로 이동하는 과정이 바로 Routing이라고 이해하면 됩니다. 그리고 여기서 각각의 경로를 Route라고 부릅니다.
뒤에서 자세히 배우겠지만 Next.js에서는 폴더 구조를 기반으로 Route들을 구성하기 때문에, 각 Route들이 아래 그림과 같이 트리(Tree) 형태로 구성되어 있습니다. 우리가 컴퓨터를 사용할 때 폴더 안에 다른 폴더나 파일을 넣어서 계층 형태로 구성하는 것을 떠올리면 이해하기 쉽습니다.
위 그림에 나타난 각 요소의 역할은 다음과 같습니다.
- Tree: 계층적 구조를 시각화하는데 사용하는 도식
- Subtree: 새로운 Root(첫 번째)에서 시작하여 Leaf(마지막)에서 끝나는 Tree의 일부
- Root: Tree 또는 Subtree의 첫 번째 노드
- Leaf: 자식이 없는 Subtree의 노드
그리고 이렇게 Tree에 존재하는 각 Node들은 아래 그림과 같이 URL 경로의 각 Segment에 매핑됩니다.
- URL Segment: URL 경로의 일부이며 슬래시(
/)로 구분 - URL Path: URL에서 도메인 다음에 나오는 부분을 의미하며, Segment들의 조합
Next.js를 사용해서 개발할 때는 이러한 구조를 잘 기억해두는 것이 중요합니다. 일반적으로 리액트만을 사용해서 웹사이트를 개발할 때는 아래 예시 코드와 같이 React Router를 사용하게 되는데, 각 경로를 JavaScript 객체 형태로 구성하는 React Router의 방식과는 차이가 있기 때문입니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import IndexPage from './pages/IndexPage';
import PostsPage from './pages/PostsPage';
import ContactsPage from './pages/ContactsPage';
const router = createBrowserRouter([
{
path: '/',
element: <IndexPage />,
},
{
path: '/posts',
element: <PostsPage />,
},
{
path: '/contacts',
element: <ContactsPage />,
},
]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
마지막 업데이트: 2025년 10월 24일 01시 53분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page