4. 페이지 만들기 – Next.js에서 페이지 생성 및 라우팅

 Next.js는 React 기반의 프레임워크로, 빠르고 효율적으로 웹 애플리케이션을 개발할 수 있는 강력한 도구입니다. 그 중에서도 Next.js의 가장 큰 특징은 페이지 생성과 라우팅이 매우 간단하다는 점입니다. 이번 글에서는 Next.js에서 페이지를 생성하고, 라우팅을 설정하는 방법을 초보자도 쉽게 이해할 수 있도록 설명드리겠습니다.

1. Next.js에서 페이지 생성하기

Next.js에서 페이지는 pages 폴더 내에 JavaScript 파일을 추가하여 생성할 수 있습니다. 이 폴더 내의 파일들은 자동으로 해당 경로와 연결되어, 페이지가 생성됩니다. 예를 들어, pages/about.js 파일을 추가하면 /about 경로로 접근할 수 있는 페이지가 자동으로 만들어집니다.

페이지 생성 방법:

1. pages 폴더에 새로운 JavaScript 파일을 추가합니다.
2. 그 파일에 React 컴포넌트를 작성하여 해당 페이지의 내용을 정의합니다.

예시 코드:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About page of our Next.js application.</p>
    </div>
  );
}

위 코드를 작성하면, /about 경로로 접근 시 About Us라는 제목과 간단한 텍스트가 표시된 페이지가 나타납니다.

2. 동적 라우팅 (Dynamic Routing)

Next.js는 파일 이름을 기반으로 라우팅을 자동으로 처리하지만, 동적 라우팅도 지원합니다. 동적 라우팅은 URL 경로의 일부를 변수로 설정하여, 동일한 페이지에서 다른 데이터를 표시할 수 있도록 합니다.

동적 라우팅 설정 방법:

1. 파일 이름에 대괄호([])를 사용하여 변수를 설정합니다.
2. 해당 페이지에서 useRouter 훅을 사용하여 동적 경로의 값을 가져옵니다.

예시 코드:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the page for post {id}.</p>
    </div>
  );
}

위 예시에서는 [id].js 파일을 사용하여, /posts/1, /posts/2와 같은 동적 URL을 처리할 수 있습니다. useRouter 훅을 사용하여 URL의 id 값을 가져와 해당 데이터를 페이지에 표시할 수 있습니다.

3. 링크 추가하기 – 페이지 간 이동

Next.js에서는 페이지 간 이동을 위해 next/link 모듈을 제공합니다. 이 모듈을 사용하면, 클라이언트 사이드에서 빠르게 페이지를 전환할 수 있습니다.

링크 추가 방법:

1. next/link를 임포트합니다.
2. 링크를 클릭했을 때 이동할 경로를 href 속성으로 지정합니다.

예시 코드:

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <p>
        <Link href="/about">
          <a>Learn more about us</a>
        </Link>
      </p>
    </div>
  );
}

위 코드를 작성하면, Welcome to Our Website라는 텍스트 아래에 Learn more about us라는 링크가 생성됩니다. 클릭하면 /about 페이지로 이동하게 됩니다.

4. URL 쿼리 파라미터 사용하기

Next.js에서는 URL에 쿼리 파라미터를 추가하여 데이터를 전달할 수 있습니다. useRouter 훅을 사용하여 URL의 쿼리 파라미터를 쉽게 가져올 수 있습니다.

쿼리 파라미터 사용 방법:

1. href 속성에 쿼리 파라미터를 추가합니다.
2. useRouter 훅을 사용하여 해당 값을 가져옵니다.

예시 코드:

// pages/search.js
import { useRouter } from 'next/router';

export default function Search() {
  const router = useRouter();
  const { query } = router.query;

  return (
    <div>
      <h1>Search Results</h1>
      <p>Searching for: {query}</p>
    </div>
  );
}

위 예시에서는 /search?query=Next.js와 같은 URL로 접속할 때, 쿼리 파라미터인 query 값을 가져와 페이지에 표시할 수 있습니다.

5. Next.js 페이지 생성과 라우팅의 장점

Next.js의 페이지 생성과 라우팅은 매우 직관적이고 간단합니다. pages 폴더에 파일을 추가하는 것만으로 라우팅을 자동으로 처리해주며, 동적 라우팅과 쿼리 파라미터 사용도 매우 간편합니다. 이러한 점은 웹 애플리케이션을 개발할 때 생산성을 높이고, 코드의 유지 보수를 용이하게 만들어 줍니다.

결론

Next.js에서 페이지를 생성하고 라우팅을 설정하는 방법을 알아보았습니다. pages 폴더에 파일을 추가하여 자동으로 페이지를 생성하고, 동적 라우팅과 쿼리 파라미터를 활용하면 더욱 유용한 웹 애플리케이션을 개발할 수 있습니다. 또한, next/link를 사용하면 페이지 간의 이동이 매우 간단하고 빠르게 이루어집니다. Next.js를 사용하여 페이지 생성과 라우팅을 손쉽게 구현해 보세요.

12 React Router로 페이지 이동하기: React Router v6 기본 사용법 및 동적 라우트

 

1. React Router란?

React는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작합니다. 사용자가 다른 페이지로 이동할 때 전체 페이지를 다시 로드하지 않고도 클라이언트 사이드에서 라우팅을 처리할 수 있도록 React Router가 사용됩니다. 특히 React Router v6는 더욱 간결한 문법과 강력한 기능을 제공합니다.

2. React Router v6 기본 사용법

React Router v6을 사용하려면 react-router-dom 패키지를 설치해야 합니다.

가. React Router 설치

npm install react-router-dom

나. 기본적인 라우팅 설정

React Router를 사용하려면 BrowserRouter, Routes, Route 컴포넌트를 활용하여 라우트를 설정해야 합니다.

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

function Home() {
  return <h2>홈 페이지</h2>;
}

function About() {
  return <h2>소개 페이지</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

위 코드에서 Routes 내부에 여러 개의 Route를 설정하여 경로에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

3. 동적 라우트와 URL 파라미터 처리

경로에 변수를 포함할 경우 **동적 라우트(Dynamic Route)**를 사용합니다. 동적 라우트는 useParams 훅을 활용하여 URL에서 값을 가져올 수 있습니다.

가. 동적 라우트 설정

import React from "react";
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";

function UserProfile() {
  let { username } = useParams();
  return <h2>{username}님의 프로필 페이지</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:username" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

위 코드에서 :username은 동적인 값으로, /user/홍길동처럼 접근하면 홍길동님의 프로필 페이지가 렌더링됩니다.

4. 네비게이션 및 링크 사용

페이지 이동을 위해 Link와 useNavigate를 활용할 수 있습니다.

가. Link 컴포넌트 사용

import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </nav>
  );
}

나. useNavigate로 프로그래밍 방식 이동

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  
  return (
    <div>
      <h2>홈 페이지</h2>
      <button onClick={() => navigate("/about")}>소개 페이지로 이동</button>
    </div>
  );
}

5. 정리

React Router v6을 활용하면 클라이언트 사이드 라우팅을 쉽게 구현할 수 있습니다. 기본적인 페이지 이동뿐만 아니라 동적 라우트와 URL 파라미터를 활용하여 다양한 구조의 웹 애플리케이션을 만들 수 있습니다. 또한 Link와 useNavigate를 이용해 네비게이션을 효율적으로 관리할 수 있습니다.

React 프로젝트에서 React Router v6를 적극적으로 활용하여 사용자 경험을 향상시켜 보세요!