230918 - Next Routing (라우팅)

오늘 내가 배운 것

1. Routing
2. Dynamic routing
3. Next.js Routing
4. SPA
 
 

1. Routing

https://example.com/dashboard/analytics

• example.com : Domain : example.com은 도메인이라고 부른다.
• dashboard/analytics : 도메인 뒤를 path라고 부른다.
• dashboard, analytics : path의 구성요소로 segment라고 부른다.

라우팅이라는 것은 경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가를 결정하는 것이라고 한다.
 
 

2. Dynamic routing

다이나믹 라우팅은 동적라우팅, 적응형 라우팅이라고도 한다.

https://example.com/read/1
https://example.com/read/2

위의 경로에서 1이나 2처럼 어떤 값이 올지 모르는(동적으로 바뀌는) 것을 말한다.

 

3. Next.js Routing

3-1. 기본

Next.js에서 라우팅을 위해서 디렉토리를 이용해서 할 수 있다.
path가 '/create'라고 한다면

https://localhost:3000/create

src/app/create 디렉토리를 이용해서 라우팅을하고 create/page.js의 파일을 이용해서 화면을 그릴 수 있다.

|- /src
|--- /app
|----- /create
|------- /layout.js
|------- /page.js
|----- /read
|------- /page.js

 

3-2. 다이나믹 라우팅

동적으로 변하는 id값을 가진 라우팅상황에서 path가 '/read/[id]'라고 한다면

https://localhost:3000/read/1
https://localhost:3000/read/2

src/app/read/[id] 디렉토리를 이용해서 라우팅하고 [id]/page.js 파일을 이용해서 화면을 그릴 수 있다.

|- /src
|--- /app
|----- /read
|------- /[id]
|--------- /page.js

// src/app/read/[id]/page.js
const Read = (props) => {
    return (
        <>
            <h2>Read</h2>
            param : {props.params.id}
        </>
    )
}

export default Read

4. SPA

Next.js는 SSR이나 SSG에 강점이 있지만 SPA방식으로 이용할 수 있다.
예를 들어 a태그를 이용해서 화면을 변경할 때 layout을 제외한 일부분만 변경되는 화면이여도 a태그를 이용한 화면에서는 서버를 이용해서 화면을 다시 그려서 클라이언트로 보내주기 때문에 HTML 전체를 다시 요청해서 그려서 사용자에게 보여준다.
이 과정에서 리소스를 많이 사용하기 때문에 서비스를 제공하는 개발자(제공자)가 비용이 많이 들어갈 뿐만 아니라 서비스를 이용하는 이용자도 시간을 사용하게 된다.
이를 해결하기 위해서 a태그 대신 next/link의 Link 컴포넌트를 이용할 수 있다.

Link 컴포넌트

// a태그
<h1>
    <a href="/">WEB</a>
</h1>

// Link 컴포넌트
<h1>
    <Link href="/">WEB</Link>
</h1>

Link 컴포넌트를 이용한 후 해당 페이지를 이동하기 전 hover 이벤트 발생시에 해당 라우터에서 데이터를 프리패치 할 수 있는 기능이 있다. 프리패치 기능은 대상 페이지의 데이터를 미리 로드하여 사용자가 해당 링크를 클릭했을 때 빠르게 페이지를 보여줄 수 있도록 도와준다.
Link 컴포넌트를 사용하면 서버의 부하를 줄이고, 사용자에게 더 나은 경험을 제공할 수 있습니다.
 
 

---