📔 학습목표

1. 페이지를 이동 >> Routing
2. 게시물을 가져오자 >> Apollo-Client/ query
3. API요청시 오류 >> try-catch

라우터 객체와 라우팅

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다.

A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다"고 말한다.

정적 라우팅 (Static Routing)

/login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다.

이러한 페이지로 이동하는 것을 "정적 라우팅한다"고 한다.

이동하기 전 페이지

import { useRouter } from 'next/router'

export default function StaticRoutingPage() {

  const router = useRouter()

  const onClickMove = () => {
    router.push('/05-02-static-routed')
  }

  return <button onClick={onClickMove}>페이지 이동하기</button>

}

이동할 페이지

export default function StaticRoutedPage() {


  return <div>페이지 이동이 완료되었습니다</div>

}

import { useRouter } from 'next/router'

export default function StaticRoutingBoardPage() {

  const router = useRouter()

  const onClickMove1 = () => {
    router.push('/05-04-static-routed-board/4')
  }

  const onClickMove2 = () => {
    router.push('/05-04-static-routed-board/5')
  }

  const onClickMove3 = () => {
    router.push('/05-04-static-routed-board/7')
  }

  return (
    // 무조건 하나는 감싸줘야 함(=fragment), 하지만 불필요하게 div까지 기입할 필요는 없음 
    <>
      <button onClick={onClickMove1}>4번 게시글 이동하기</button>
      <button onClick={onClickMove2}>5번 게시글 이동하기</button>
      <button onClick={onClickMove3}>7번 게시글 이동하기</button>
    </>
  )
}

동적 라우팅 (Dynamic Routing)

게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경된다.

이러한 경우에는 게시글이 많아지면 글 번호에 따라 각각 페이지를 만들어 정적라우팅을 해주기는 어렵기 때문에 효과적으로 처리하기 위해서 동적 라우팅을 사용한다.

/board/1 ⇒ 1번 게시글 상세보기 페이지
/board/2 ⇒ 2번 게시글 상세보기 페이지
/board/3 ⇒ 3번 게시글 상세보기 페이지
/board/4 ⇒ 4번 게시글 상세보기 페이지

...                                  ...

이러한 페이지로 이동을 동적 라우팅한다 고 합니다.

import { useRouter } from 'next/router'

import { useQuery,gql } from '@apollo/client'

const FETCH_BOARD =gql`
  query fetchBoard($number: Int){
    fetchBoard(number: $number){
      number
      writer
      title
      contents
    }
  }

`

export default function StaticRoutedBoardPage() {

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

  // 중괄호 안에 data의 이름은 바꿀 수 없음 반드시 data로 작성해야 함
  const { data } = useQuery(FETCH_BOARD, {
    variables: {number: Number(router.query.number)}
  })
  // 라우터.쿼리.aaa를 가져올때 문자열로 가져오기 때문에 int 가 아니므로 숫자로 묶어줘야 함

  console.log(data)

  return (
    <div>
      <div>{router.query.number}번 게시글 이동이 완료되었습니다</div>
      <div>작성자: {data?.fetchBoard.writer}</div>
      <div>제목: {data?.fetchBoard.title}</div>
      <div>내용: {data? data.fetchBoard.contents: "조금만 기다려주세요..."}</div>
    </div>
    )

}