[네트워크] 라우팅

라우팅?

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

페이지를 이동하자 = Routing

const router = useRouter();
router.push("이동할 페이지")
router.reload()
router.replace()
router.pathname
...

router.xxx(주소) 이런식으로 작성되게 되는데,
⭐️주소⭐️가 나오는 순간 router가 있는지 생각해봐야한다!

사용법

import { useRouter } from "next/router";

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

  const onClickMove = () => {
    router.push("/05-02-static-routed");
  };

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

export default function StaticRoutedPage() {
  return;
  <div> 페이지 이동이 완료되었습니다.</div>;
}

조건부렌더링

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

이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용한다.
조건부렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.

조건부 렌더링의 종류

• 옵셔널체이닝(가장 많이 사용💡)

data?.fetchProfile

옵셔널체이닝은 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자이다. (최신 문법)
? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴한다.

• &&연산자

data && data.fetchProfile

&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환한다.
데이터가 없을 때 따로 div를 쓸 필요가 없으면 else 부분을 쓸 필요가 없다.

&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있다.
Nullish coalescing 연산자라 불린다.

??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주며 ||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여줍니다.

data ?? data.fetchProfile
data || data.fetchProfile

• 삼항연산자

data ? data.fetchProfile.contents : "로딩중입니다."

data가 있으면 data.fetchProfile.contents를 보여주고,
data가 없으면 "로딩중입니다." 라는 값이 반환된다.

정적 라우팅 vs 동적 라우팅

정적 라우팅 :
/login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다.
이러한 페이지로 이동하는 것을 "정적 라우팅한다"고 한다.

동적 라우팅 :
반면, 게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경된다.
하지만, 이러한 경우에는 게시글이 100개, 1000개가 넘어가게 되면 각각의 글 번호에 따라 페이지를 100개, 1000개씩 만들어 정적라우팅을 해주기는 어렵기 때문에 이러한 라우팅을 효과적으로 처리하기 위해서 "동적 라우팅"을 사용한다.

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

next.js에서의 동적 라우팅

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

대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰여진 변수명에 담겨져 그 변수 안에 있는 데이터를 꺼내 조회할 수 있다. (이 때, 대괄호 안에 쓰여지는 폴더 이름은 단순히 변수명이기 때문에 어떻게 작성해주셔도 상관없음.)
이러한 과정을 router 객체가 도와주는 것이다.

실제로 router.query = { boardId: 1 } 이런 형식으로 들어가게 되면서 자동으로 게시글 번호를 꺼내올 수 있다.

etc

key와 value의 값이 같다면 value값을 생략할 수 있다.(= Shorthand-property

const name = "철수"
const age = 12
const schoo = "다람쥐초등학교"
const name = "철수"
const age = 12
const schoo = "다람쥐초등학교"
const profile = { 
    name : name,
    age : age,
    school : school 
}
//이렇게 표현가능
const profile = {name, age, school}