Router

라우터(router)는 페이지 이동과 관련된 기능이다.

	const router = useRouter()
	router.push("이동할 페이지")

위와 같은 기본 형태이며 push 이외에도 reload, replace, pathname 등이 있다.

⭐️자주 사용하는 라우터 객체
Router.pathname ---> 현재 위치 주소
Router.asPath ------> 현재 위치 주소
Router.back() ------> 뒤로가기 버튼
Router.push() ------> 현재 페이지에서, 다른 페이지로 이동
Router.reload() -----> 새로고침
Router.replace() ----> 현재 페이지 삭제 후 다른 페이지로 이동

---

Static Routing

정적 라우팅이라고도 불리우며 어느 누가 언제 접속해도 항상 그 특정한 페이지로 이동하는 것을 의미한다.

static routing 실습

A page에서 B page로 정적라우팅

<A page>

// 1. 라우터를 먼저 import!
import { useRouter } from 'next/router'


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


    const onClickMove = () => {
      	// 2. router.push 를 이용하여 괄호 안에 있는 페이지로 이동!
        router.push("/section05/05-01-static-routing-moved")
    }

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

<B page>

 export default function StaticRoutingPageMoved() {

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

---

Dynamic Routing

정적 라우팅과는 다르게 항상 같은 페이지로 이동이 아닌, 예를들어 게시글에 따라 각각 다른 내용을 보여주어야 할 경우 해당하는 페이지로 이동하기 위해서는 동적 라우팅을 사용해주어야 한다.

<게시판 페이지>

import { useRouter } from 'next/router'

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

	//각각의 페이지로 이동할 수 있게 router.push 사용
    const onClickMove1 = () => {
        router.push("/section05/05-02-static-routing-board-moved/1")
    }

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

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

    return (
        <div>
      		// 해당 버튼을 누르면 그에 맞는 게시글로 이동이 가능하다.
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
        </div>
    )
}

<1번 게시글>

export default function StaticRoutingPageBoardMoved() {

    return <div>1번 게시글로 이동이 완료되었습니다.</div>
}

<2번 게시글>

export default function StaticRoutingPageBoardMoved() {

    return <div>2번 게시글로 이동이 완료되었습니다.</div>
}

<3번 게시글>

export default function StaticRoutingPageBoardMoved() {

    return <div>3번 게시글로 이동이 완료되었습니다.</div>
}

---

조건부 렌더링

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

이러한 에러 발생을 방지하기 위해 조건부렌더링을 사용한다.

삼항 연산자

삼항 연산자는 초기에 많이 사용하였으며 데이터가 있을 때, 없을 때를 모두 적어주어 data를 동기적으로 받음

data ? data.fetchProfile : undefined

&&연산자

이후 &&연산자를 사용하여 데이터가 없을 경우 자동으로 undifined를 반환
&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여준다.

data && data.fetchProfile

반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있습니다, Nullish coalescing 연산자라고 한다.

??연산자

앞의 값이 빈 값이면 뒤의 값을 보여준다.

data ?? data.fetchProfile

||연산자

앞의 값이 거짓(false)일 경우 뒤의 값을 보여준다.

data || data.fetchProfile

Optional Chaining

optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자이다.

data?.fetchProfile

---