Routing 및 조건부렌더링

✏️  Router 객체

• Router 객체란 페이지 이동과 관련된 기능을 가지고있는 객체이다.

자주 사용하는 Router 객체 기능

• 공식 문서: https://nextjs.org/docs/pages/api-reference/functions/use-router

Functions: useRouter | Next.js

import Router from 'next/router'

현재 위치 주소: Router.pathname
현재 위치 주소: Router.asPath
뒤로가기 버튼: Router.back()
현재 페이지에서 다른 페이지로 이동: Router.push('/')
새로고침: Router.reload()
현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace('/')

• asPath vs pathname
  • asPath: 내가 입력한 주소
  • pathname: 대응되는 폴더 구조
  • query 안에 qqq안에 1이 문자열로 저장되어 있음
    • number: Number(router.query.qqq)
• route는 현재 pathname과 동일

{
    "pathname": "/section5/05-04-dynamic-routing-board-query-moved/[qqq]",
    "route": "/section5/05-04-dynamic-routing-board-query-moved/[qqq]",
    "query": {
        "qqq": "1"
    },
    "asPath": "/section5/05-04-dynamic-routing-board-query-moved/1",
    "components": {
        "/section5/05-04-dynamic-routing-board-query-moved/[qqq]": {
            "initial": true,
            "props": {
                "pageProps": {}
            },
            "__N_RSC": false
        },
        "/_app": {
            "styleSheets": []
        }
    },
    "isFallback": false,
    "basePath": "",
    "isReady": true,
    "isPreview": false,
    "isLocaleDomain": false,
    "events": {}
}

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

• 효율적인 실행을 위해 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용한다.
• 조건부렌더링에는 &&연산자, 삼항연산자, Optional-Chaining이 있다.

삼항 연산자

data ? data.fecthBoard : "로딩중"

&& 연산자

• 데이터가 없을 경우 자동으로 undefined를 반환해준다.
• 앞의 값이 참일 경우에만 뒤의 값을 보여준다.

data && data.fetchBoard

Nullish coalescing 연산자

• 앞의 값이 거짓일때 뒤의 값을 보여준다.
  • ?? 연산자는 앞의 값이 빈 값이면 뒤의 값을 보여준다.
  • || 연산자는 앞의 값이 거짓일 경우 뒤의 값을 보여준다.

data ?? data.fetchBoard
data || data.fetchBoard

Optional Chaining

• 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자
• ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 반환해준다.
• re-rendering
  • 데이터가 없을때는 undefined를 리턴했다가, 데이터가 들어오면 들어온 데이터를 가지고 화면을 다시 렌더링해준다.

data?.fetchBoard?.title