Static,Dynamic 라우팅 , 옵셔널 체이닝 , 조건부 렌더링 , try,catch

Static(정적) , Dynamic(동적) 라우팅

Static Routing

- routing

import {useRouter} from "next/router"

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

    function onClickMove() {
        // onClickMove가 실행될때
        router.push('/05-02-static-routed')
        // 05-02-static-routed 페이지로 이동해라
        // 주소는 앞에 localhost:3000을 제외한 뒷부분부터 작성해주면됨
    }

    return(
        <>
            <button onClick={onClickMove}>정적 라우팅 페이지 이동!!!</button>
            {/* 버튼 클릭하면 StaticRoutedPage로 이동해야함 */}
        </>

    )
}

router기능을 사용하기 위해서

import {useRouter} from "next/router

next에서 router라는 기능을 import해와야 함.

그리고나서 router를 사용하기위해

const router = useRouter()

라우터라는 변수에 useRouter()라는 값을 할당해준다.
이로써 router를 통해서 정보를 받아 올 수 있음.

버튼이 클릭되었을때 페이지가 이동해야 하는데
이때 버튼에 onClick걸어서 버튼을 누르면

function onClickMove() {
  router.push('/05-02-static-routed')
}

이 함수가 실행되게 세팅한다.
함수 안에 있는

router.push('/05-02-static-routed')

이 코드는 "/05-02-static-routed 폴더 안에 있는 페이지로 이동해라"
라는 의미임. 따라서 이코드는 버튼을 누르면 /05-02-static-routed페이지로 이동하는 코드임

- routed

export default function StaticRoutedPage() {
    return (
        <>
            페이지 이동 완료됨!!!
        </>
    )
}

페이지가 이동되면 이 화면이 보임

Dynamic Routing

- Routing

import { useRouter } from "next/router"

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

    function onClickMove1() {
        router.push("/05-04-dynamic-routed/1")
    }

    function onClickMove2() {
        router.push("/05-04-dynamic-routed/2")
    }

    function onClickMove3() {
        router.push("/05-04-dynamic-routed/3")
    }

    return( 

        <>
            <button onClick={onClickMove1}>1번 게시물로 이동하기!!!</button>
            <button onClick={onClickMove2}>2번 게시물로 이동하기!!!</button>
            <button onClick={onClickMove3}>3번 게시물로 이동하기!!!</button>
        </>
    )
}

폴더를 보면 좀 신기한게 [aaa]라고 되어있다.
이건 동적라우팅을 쓰기위해 폴더를 저렇게 만드는거고
이 폴더안에 index.js파일을 만들어준다.

버튼이 3개가 있는데 각각 다른 onClick 함수가 있다.

    function onClickMove1() {
        router.push("/05-04-dynamic-routed/1")
    }

    function onClickMove2() {
        router.push("/05-04-dynamic-routed/2")
    }

    function onClickMove3() {
        router.push("/05-04-dynamic-routed/3")
    }

이렇게 작성하면 정적라우팅의 경우 적어도 3개의 파일이 필요한데,
동적라우팅은 [aaa] 하나로 퉁칠 수 있다.
원리는 endpoint가 aaa에 저장이 되고, 저장된 aaa에서 해당 파일로
이동하는 원리이다.

그래서 정적 라우팅 처럼 폴더를 여러개 만들 필요가 없다.

- routed

import { useRouter } from "next/router"

export default function DynamicRoutedPage() {
    const router = useRouter()
    // router.query안에 정보가 들어가 있음.

    return (
        <>
            {/* 변수로 뽑아서 몇번인지 알아내서 넣어주면 될거같음 */}
            <div>{router.query.aaa}번 페이지 입니다</div>
            <div>동적 페이지 이동 완료!!</div>
        </>
    )
}

페이지가 이동되고 몇번 페이지인지 알고 싶다면, 라우터를 활용하면 된다.
라우터를 활용하기 위해

import { useRouter } from "next/router"

라우터의 기능을 import 해와야 한다.

router.query안에 정보가 들어있기 때문에

const router = useRouter()

라우터 값을 가져오고

<div>{router.query.aaa}번 페이지입니다.</div>

정보를 받아와서 적용해주면 몇번 페이지인지 화면에 뜬다.

옵셔널 체이닝 vs 조건부 렌더링

- 조건부 렌더링

<div>게시글 내용: {data && data.fetchBoard.contents}</div>

- 옵셔널 체이닝

<div>게시글 내용:{data?.fetchBoard.contents}</div>

둘 다 data가 존재하면

data.fetchBoard.contnets

가 실행되고 , 존재하지 않으면 실행되지 않는건데,
옵셔널 체이닝이 쓰기 더 간단해서 실무에서는 옵셔널 체이닝을
더 많이 쓴다고 함.

삼항연산자

<div>게시글 내용: 
  {data ? data.fetchBoard.contents : "loading..."}
</div>

data가 존재하면?

data.fetchBoard.contents

실행, 존재하지 않다면? "loading..." 실행

try , catch 문법

try {
  // 성골할때 행동을 할 곳
}
catch {
  // 실패할때 행동을 할 곳
}

보통 네트워크 관련 코드들이 이 문법을 쓴다.
왜냐하면 코드가 성공적으로 실행되리란 보장이 없기 때문에
try,catch문법을 쓴다고 한다.