이전 블로그와 같은 결로 라우팅에 대해 더 자세히 살펴보자!

들어가며

라우팅에는 정적 라우팅 (Static Routing)과 동적 라우팅 (Dynamic Routin)이 있다.
정적 라우팅과 동적 라우팅은 둘 중 뭐가 좋고 나쁘다가 아닌, 케이스마다 적절히 사용해야 한다!

Static Routing / Dynamic Routing

1. Static Routing / Dynamic Routing이란?

1) Static Routing (정적 라우팅)

정적 라우팅이란 두 라우터 간에 연결된 경로가 고정되어 있는 것을 말한다.
즉, 변경 사항이 발생했을 경우 라우팅 경로를 수동으로 업데이트해줘야 한다.
로그인 화면은 항상 로그인 화면만 보여줘야 하므로 정적 라우팅이 필요하다.

2) Dynamic Routing (동적 라우팅)

동적 라우팅이란 두 라우터 간에 연결된 경로가 자동 업데이트 되는 것을 말한다.
즉, 변경 사항이 발생했을 경우 정적 라우팅과 달리 라우팅 경로가 자동으로 업데이트된다.
게시물 상세보기 페이지는 어떤 게시물인지에 따라 페이지가 바껴야 하고, 게시물이 수천 개일 경우 수천 개의 페이지를 다 만들 수 없으로 동적 라우팅이 필요하다.

2. Static Routing / Dynamic Routing 활용하기

1) Static Routing (정적 라우팅)

Routing page

import {useRouter} from 'next/router'

export default function StaticRoutingPage() {
	const router = useRouter()
    
    const onClickMove1 = () => {
    	router.push('/static-routed-board-query/1)
    }
    
    return (
    	<button onClick={onClickMove1}> 1번 게시글 이동 </button onClick={onClickMove1}>
    )
 }

Routed page

 import {useQuery, gql} from '@apollo/client'
 
 const FETCH_BOARD = gql `
 	query fetchBoard($number: Int) {
    	fetchBoard(number: $number) {
        	number
            writer
            title
            contents
        }
     }
 `
 
 export default function StaticRoutedPage() {
 	const {data} = useQuery (FETCH_BOARD, {
    	varialbes: {
        	number : 2
        }
    })
    
    return(
    		<>
          <div>1번 게시글 이동 완료</div>
          <div>작성자 : {data?.fetchBoard.writer}</div>
          <div>제목 : {data?.fetchBoard.title}</div>
          <div>내용 : {data?.fetchBoard.contents}</div>
		</>
     )
   }

2) Dynamic Routing (동적 라우팅)

Routing Page

import {useRouter} from 'next/router'

export default function DynamicRoutingPage() {
	const router = useRouter()
    
    const onClickMove1 = () => {
    	router.push('/static-routed-board-query/1)
    }
    
    return (
    	<button onClick={onClickMove1}> 1번 게시글 이동 </button onClick={onClickMove1}>
    )
 }

Routed Page

• [number]라는 폴더 안에 index.js 파일 생성 필요
• data 내의 변수인 number에 router.query.number 가져오기 (기본적으로 string으로 가져오므로 Number를 활용하여 숫자로 가져오기)

 import {useQuery, gql} from '@apollo/client'
 
 const FETCH_BOARD = gql `
 	query fetchBoard($number: Int) {
    	fetchBoard(number: $number) {
        	number
            writer
            title
            contents
        }
     }
 `
 
 export default function DynamicRoutedPage() {
 	const {data} = useQuery (FETCH_BOARD, {
    	varialbes: {
        	number : Number(router.query.number)
        }
    })
    
    return(
    		<>
          <div>{router.query,number}번 게시글 이동 완료</div>
          <div>작성자 : {data?.fetchBoard.writer}</div>
          <div>제목 : {data?.fetchBoard.title}</div>
          <div>내용 : {data?.fetchBoard.contents}</div>
		</>
     )
   }