쭈꾸미
코드짜는 쭈꾸미
쭈꾸미
전체 방문자
오늘
어제
  • 분류 전체보기 (122)
    • Journal (54)
      • Today I Learned (44)
      • 후기&회고 (4)
      • 개인 프로젝트 (4)
      • 독서일기 (2)
    • HTML, CSS (5)
    • Javascript (32)
    • Typescript (2)
    • Git, Github (4)
    • Algorithm (1)
    • React, Next.js (14)
    • API, Database (6)
      • API (0)
      • Database (1)
      • GraphQL (2)
      • Rest-API (1)
    • React-Native (1)
    • ETC (2)
    • OS (1)
      • 우분투 Ubuntu (1)

인기 글

티스토리

hELLO · Designed By 정상우.
쭈꾸미

코드짜는 쭈꾸미

[Next.js] 정적 라우팅과 동적 라우팅 | Static-Routing and Dynamic-Routing
React, Next.js

[Next.js] 정적 라우팅과 동적 라우팅 | Static-Routing and Dynamic-Routing

2022. 1. 18. 09:29

Routing / Router

라우팅이란 페이지 이동을 뜻한다. 그리고 라우터는 이러한 라우팅을 도와주는 도구이다.

 

React 기반의 프레임워크인 Next.js에는 자체 라우터가 내장되어있다. 이 라우터를 불러와서 사용하면 간편하게 라우팅을 할 수 있다. 라우터에도 다양한 기능이 있으며, 이러한 것들을 포함하고 있는 라우터 자체를 라우터 객체라고 부른다. 주로 사용되는 라우터 객체의 내장 메소드는 다음과 같다.

 

import {useRouter} from 'next/router'
// 먼저 라우터를 import 해와야 사용할 수 있다.
const router = useRouter()

router.push("이동할 페이지") // 다른 페이지로 이동한다.
router.reload() // 새로고침한다.
router.replace("이동할 페이지") // 현재 페이지를 삭제하고 다른 페이지로 이동한다.
router.pathname // 현재 위치의 주소를 불러온다.

더 자세한 내용을 확인하고 싶을 경우에는 Next.js 공식 문서를 참고하자.

https://nextjs.org/docs/api-reference/next/router

 

next/router | Next.js

Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.

nextjs.org

 

정적 라우팅

고정된 페이지로 라우팅하는 것. /login 페이지가 대표적인 예시로, 누가 언제 접속하더라도 같은 페이지로 라우팅된다. 이러한 방식으로 이동하는 것을 정적 라우팅한다고 표현한다.

 

동적 라우팅

가변적인 페이지로 라우팅하는 것. 게시판 상세보기 같은 것이 대표적인 예시로, 실제 소스코드는 한 페이지지만 글 번호나 글의 id에 따라서 주소가 변경된다. 예를 들면 아래와 같다.


예시 폴더트리

/05-router-practice/ 로 이동하면 항상 고정된 페이지(index.js)로 연결된다. (정적 라우팅)

/05-router-practice/1 - 1번 게시글

/05-router-practice/2 - 2번 게시글

/05-router-practice/3 - 3번 게시글

/05-router-practice/4 - 4번 게시글로 연결된다. (동적 라우팅)


Next.js에서 동적 라우팅 시, 대괄호 안에 들어있는 문구는 변수의 기능을 한다.

라우터 객체를 이용해 이 변수의 값을 지정해줄 수 있으며, 이 변수는 문서 내에서 자유롭게 활용이 가능하다.

const router = useRouter()
console.log(router.query)

 

'React, Next.js' 카테고리의 다른 글

[React] 리액트의 핵심, State (with useState)  (0) 2022.01.20
[React] 컴포넌트 디자인 패턴 - container / presenter 패턴  (0) 2022.01.20
[React] Fragment  (0) 2022.01.17
[React] export와 export default  (0) 2022.01.17
[React] JSX란?  (0) 2022.01.12
    'React, Next.js' 카테고리의 다른 글
    • [React] 리액트의 핵심, State (with useState)
    • [React] 컴포넌트 디자인 패턴 - container / presenter 패턴
    • [React] Fragment
    • [React] export와 export default
    쭈꾸미
    쭈꾸미
    느리지만 확실하게 / 웹 프론트엔드 개발자 TIL : https://jooeun-k.github.io/TIL/

    티스토리툴바