[Next]동적 라우팅 방식

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다.

그렇다면 id값 같은 동적인 부분은 어떻게 해야할까?

바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것.

 

/pages
 ㄴ index.js
 /news
  ㄴindex.js
   /id
    ㄴ[newsDetail].js

위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다.

 

이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다.

 

import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook

function newsId () {
	const router = useRouter();
    
    router.query.newsDeatil // 해당 경로에 도메인을 읽어 []에 들어갈 동적 값을 가져온다.
    // 즉 domain.com/news/23의 23을 가져오는데 사용된다.
    
	return (
    	
    );
}

 

여기서 흔히 실수하는 것으로

export default function NewsPage() {
    return (
        <>
            <h1>The News Page</h1>

            <ul>
                <li><a href="/news/1" >NEWS 1</a></li>
                <li><a href="/news/2" >NEWS 2</a></li>
                <li><a href="/news/3" >NEWS 3</a></li>
            </ul>
        </>
    )
}

a태그를 이용하여 접속 할 것이다.

하지만, 이렇게 하면 망한다.

페이지를 갱신하면 redux든 context든 모든 값이 날라간다.

그렇기에 이걸 쓰지말고

Link라는 것을 쓰자. 리액트에도 해당 내용이 있다.

import Link from 'next/link'

export default function NewsPage() {
    return (
        <>
            <h1>The News Page</h1>

            <ul>
                <li><Link href="/news/1" >NEWS 1</Link></li>
                <li><Link href="/news/2" >NEWS 2</Link></li>
                <li><Link href="/news/3" >NEWS 3</Link></li>
            </ul>
        </>
    )
}

Link를 쓰는 이유는 페이지 갱신을 하지 않고도 새로 이동하기 위함이다.

spa 유지하기 위함.

하지만, a태그를 쓰면 spa가 끊어지고 새로 페이지를 서버에 요청하게 된다.

나도 React를 배울때 a태그 대신 Link태그를 쓰라고 권고 받았는데, 왜 그런가 했더니 이런 이유였다.

그냥 쓰라해서 아무생각 없이 쓰던 부분이었는데, 명확하게 해소가 되었다.

 

php의 경우 이동방법은 a태그나 form태그 정도 뿐이라...이런걸 고민하지 않지만 말이지.