[TIL] 라우터

우기·2023년 3월 17일

TIL 라우터

📒 오늘 공부한 내용

🔍수업목차

[5-1] 라우터 객체와 라우팅
[5-2] 정적라우팅과 동적라우팅
[5-3] 비동기 통신과 조건부렌더링
[5-4] graphql 뮤테이션에 try ~ catch 적용

✅ 동기 실행과 비동기 실행

📂 라우터(router) 객체 기능

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

자주 사용하는 라우터(router) 객체 기능

import Router from 'next/router'

export default function Routing() {
    const handleClickPathname = () => {
        const pathname = Router.pathname
        alert(pathname)
    }

    const handleClickAsPath = () => {
        const asPath = Router.asPath
        alert(asPath)
    }

    const handleClickBack = () => {
        Router.back()
    }

    const handleClickPush = () => {
        Router.push('/')
    }

    const handleClickReload = () => {
        Router.reload()
    }

    const handleClickReplace = () => {
        Router.replace('/')
    }


    return (
      <>
        <button onClick={handleClickPathname}>현재 위치 주소: Router.pathname</button><br/>
        <button onClick={handleClickAsPath}>현재 위치 주소: Router.asPath</button><br/>
        <button onClick={handleClickBack}>뒤로가기 버튼: Router.back()</button><br/>
        <button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: Router.push()</button><br/>
        <button onClick={handleClickReload}>새로고침: Router.reload()</button><br/>
        <button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()</button><br/>
      </>
    )
  }

✅ 정적라우팅과 동적라우팅

📂 정적라우팅

정적 라우팅은 라우팅 테이블에 관리자가 직접 수동으로 추가하는 방법
네트워크가 변경될때마다 관련되어 있는 라우터의 라우팅 테이블을 수동으로 수정하는 방법
보통 네트워크 규모가 아주 작을때나 구성한 후에 변경될 일이 별로 없을 경우 사용한다.
Login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다.
이러한 페이지로 이동하는 것을 정적 라우팅한다고 한다.

📝 보내는 정적라우팅


import { useRouter } from 'next/router'

export default function StaticRoutingPage() {
    const router = useRouter()


    const onClickMove = () => {
        router.push("/section05/05-01-static-routing-moved")
    }

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

📝 받는 정적라우팅


export default function StaticRoutingPage() {

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

📂 동적라우팅

동적 라우팅은 라우팅 테이블에서 경로의 현재 상태에 따라 경로를 동적으로 설정한다.
동적 라우팅은 라우팅 프로토콜을 사용하여 최적의 경로를 검색한다.
라우팅 프로토콜에 따라 다르지만 연결되어 있는 라우터끼리 라우팅 테이블을 주기적으로 공유한다.
게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경된다.

📝 이러한 페이지로 이동하는 것을 동적 라우팅한다고 합니다.
/board/1 ⇒ 1번 게시글 상세보기 페이지
/board/2 ⇒ 2번 게시글 상세보기 페이지
/board/3 ⇒ 3번 게시글 상세보기 페이지
/board/4 ⇒ 4번 게시글 상세보기 페이지

📝 next.js에서는 동적 라우팅을 제공해준다.

좌측 폴더 구조와 같이 보여주고자 하는 폴더 이름의 하위 폴더로 [boardId] 폴더를 만들어 준 후 이 안에 index.js 파일을 만들어주면 동적 라우팅을 사용할 수 있다.

📝 보내는 동적라우팅


import { useRouter } from 'next/router'

export default function StaticRoutingPage() {
    const router = useRouter()


    const onClickMove1 = () => {
        router.push("/section05/05-04-dynamic-routing-board-query-moved/1")
    }

    const onClickMove2 = () => {
        router.push("/section05/05-04-dynamic-routing-board-query-moved/2")
    }

    const onClickMove3 = () => {
        router.push("/section05/05-04-dynamic-routing-board-query-moved/3")
    }

    return (
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
        </div>
    )
}

📝 받는 동적라우팅

import { useQuery, gql } from "@apollo/client"
import { useRouter } from "next/router"

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

export default function StaticRoutingPage() {
  const router = useRouter()
  console.log(router)

  const { data } = useQuery(FETCH_BOARD, {
    variables: { number: Number(router.query.qqq) }
  })

  console.log(data)

  return (
    <div>
      <div>2번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data && data?.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data ? data?.fetchBoard?.contents : "로딩중입니다!!!"}</div>
    </div>
  )
}

✅ 비동기 통신과 조건부렌더링행

📂 삼항 연산자

data ? data.fetchProfile : undefined

📂 && 연산자

data && data.fetchProfile

&&연산자 : 앞의 값이 참일 경우에만 뒤의 값을 보여준다.

data ?? data.fetchProfile

??연산자 : 앞의 값이 빈 값이면 뒤의 값을 보여준다.

data || data.fetchProfile

||연산자 : 앞의 값이 거짓(false)일 경우 뒤의 값을 보여준다.

📂 옵셔널 체이닝 (Optional-Chaining)

data?.fetchProfile

optional-Chaining : ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴해준다.

✅ graphql 뮤테이션에 try ~ catch 적용

mutation이 항상 성공하는 것은 아니다.
Backend 컴퓨터에 문제가 발생할 수도 있고, 내가 수정하려는 게시물이 갑자기 삭제가 되는 바람에 수정에 문제가 발생하는 등 여러가지 실패 가능성이 있다.
따라서, 우리는 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 한다.

📝 try ~ catch 적용

try {
		await createBoard({
				variables: {
						aaa: "훈이",
						bbb: "1234",
						ccc: "안녕하세요 훈이에요",
						ddd: "반갑습니다"
				}
		})

} catch(error) {
		alert(error.message)     // 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지
} finally {
	// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
	// 필요없다면 생략 가능
}