Router

라우터 객체와 라우팅

라우터(router)객체란 페이지 이동과 관련된 기능을 가지고 있는 객체
이 객체를 사용해서 A페이지에서 B페이지로 이동할때 "B 페이지로 라우팅 한다"

자주 사용하는 라우터(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 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나옵니다.
이런 페이지 이동이 "정적 라우팅한다" 라고 함.

동적 라우팅
반면, 게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경됨.
하지만 이렇게 되면 게시글의 갯수가 커지면 커질 수록 번호에 따라서 100, 200개 정적 라우팅을 해주기는 어렵기 때문에 이런 점을 효과적으로 처리하기 위해서 동적 라우팅을 사용함.

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

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

next.js에서는 동적 라우팅을 제공.
사진과 같은 보여주고자 하는 폴더 이름이 하위 폴더로 [boardId]폴더를 만들어 준 후 이 안에 index.js 파일을 만들어주면 동적 라우팅 사용할 수 있음!!

대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰여진 변수명에 담겨져 그 변수 안에 있는 데이터를 꺼내 조회 할 수 있음(이 때, 대괄호 안에 쓰여지는 폴더 이름은 단순히 변수명이여서 마음대로 지어줘도 됨)

-> 이러한 과정을 router객체가 도와주는 것
ㄴ router.query = { boardId: 1 }

이런 형식으로 들어가게 되면서 자동으로 게시글 번호를 꺼내올 수 있어용

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

javascript는 작성된 코드가 상단에서부터 순서대로 실행된다
그 때 데이터를 요청하고 응답을 받아오는 동안, 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생한다.

이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 그려주기 위해서 조건부렌더링을 사용한다.

조건부 렌더링에는 &&연산자, 삼항연산자, 옵셔널체이닝이 있다.
사용 방법을 알아보자 !! 참고링크