페이지 이동 (Routing)

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

• 라우팅과 관련된 use 훅을 사용할 것
• 라우터에는 페이지와 관련 추가 기능이 많다. (Ex. reload(), repalce(), pathname())

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/>
      </>
    )
  }

1. 정적라우팅

• 일반적으로 알고있는 페이지 이동
• static routing
• 폴더를 하나씩, 파일을 하나씩 만들어줘야 한다. 1페이지마다 1개씩

2.동적라우팅 다이나믹라우팅

• 게시글이 여러개인 상세페이지 만들기에 적합함

• ⭐️ 폴더명 [ 변수명 ] ⭐️

aaa에는 어떤 것이든 담길 수 있다.

주소를 받아오기

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

6번 게시글에 대한 불러오기 요청을 하고 있는 것!
{ data } 는 고정임! => 구조분해할당에서 더 자세히 배우자

useMutation의 경우 우리가 어떤 행동(클릭)을 했을 때 실행
useQuery의 경우 우리가 페이지에 접속하면 바로 실행

분명히 패치보드는 있었는데!!!
페이지에 들어올 때,

윗 줄 부터 하나씩 실행한다.
data는 비어있다가 요청 보낸 것을 받아오면서 내용이 생긴다.
그런데, 이 과정에서 기다려주지 않아서 데이터가 받아오기도 전에 아래쪽이 먼저 실행되어버린 것이다. => undefined 상태

그럼 async-await 하면 되지 않을까요??

그렇게 되면

return 부분이 모두 비어있게 된다.
속도가 느린 곳에서는 계속 흰 화면이게 됨
그래서, 보여줄 수 있는 부분은 보여주고 기다리자.

정리
🔥 비동기적으로 요청 처리하여 응답받기 전에 하단부 실행되어 에러 발생
🔥 먼저 보여줘도 되는 내용 먼저 보여주고, 데이터 요청받기 (작성할때와는 다름) - 기다리기만 하면 안됨

=> 테스트 하는 법? 네트워크에서 3G로 변경

📌 조건문 렌더링 : 조건에 따라 그림을 그린다.

• 데이터가 있으면 뒤, 없으면 앞

사용예시

삼항연산자

data ? data.fetchBoard.title : "조금만기다려주세요..." (삼항연산자)

data는 동기적으로 받아와야하는 데이터
하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줘야함

&&연산자

data && data.fetchBoard.writer (&&연산자)

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

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

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

data ?? data.fetchBoard.writer

data || data.fetchBoard.writer

옵셔널체이닝

• ES2020에서 나온 것

data?.fetchBoard.writer 

optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴

위에 있는 삼항연산자, && 연산자와 똑같은 기능

try ~ catch

백엔드나 외부의 문제에 대해서 시도하는 과정
Try 내용으로는... 이 함수가 성공하면 시도해야할 내용을 담고 => return에 주소를 받아서 상세페이지 이동
중간에 실패하면 catch 내용을 실행 (메시지내용은 백엔드에서 만든것이 노출)

만약, 무조건해야하는 것이 있다면 => 로그 남기기

finally 부분에 남기자.

템플릿 리터럴

훨씬 깔끔하게 코드 작성 가능
백틱( )을 사용하여 문자열을 만든다.
템플또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데,
이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다

console.log(
  `의류를 구매한 횟수는 총 ${count}회 금액은 ${amount}원 이며 등급은 ${grade}입니다.`
);

추가 학습 주제

라우터 객체의 push와 replace 의 차이를 아시나요? 사용 예시를 하나씩 말해보세요.

로그인 할 때

push

홈 > 로그인 > 리다이렉트 페이지 > [뒤로가기] > 로그인

push를 사용하면 히스토리가 순서대로 쌓여서, 로그인 다음 페이지에서 뒤로가기 버튼을 누르면 로그인 페이지로 돌아가게 된다.

import React from 'react';

function Login({ history }) {
  history.push('/item');
  return <div>Login</div>;
}

export default Login;

replace

홈 > 로그인 > 리다이렉트 페이지 > [뒤로가기] > 홈

replace를 사용하면 history 제일 위에 있는 원소를 지금 넣을 원소로 바꿔줘서, 뒤로가기 버튼을 누르면 로그인의 전 페이지로 돌아가게 된다.
replace는 페이지를 이동한다기 보다는 현재 페이지를 바꿔주는 개념이라고 한다!

import React from 'react';

function Login({ history }) {
  history.replace('/item');
  return <div>Login</div>;
}

export default Login;

라우터 객체의 pathname과 asPath는 무엇이 다른가요?

pathname

• String
• 현재 경로
  Current route. That is the path of the page in /pages, the configured basePath or locale is not included.

asPath

• String
• 쿼리를 포함한 path

The path (including the query) shown in the browser without the configured basePath or locale.

query

• Object
• object로 파싱한 query string
• 데이터를 가져오는 기능이 없는 페이지의 경우, 빈 객체다.

The query string parsed to an object. It will be an empty object during prerendering if the page doesn't have data fetching requirements. Defaults to {}

React에도 Next 처럼 Router가 있습니다.
React와 Next의 Router는 분명히 다릅니다. 어떤 차이가 있는지 설명해 보세요.

Next.js같은 경우 원하는 a태그에 링크를 걸어서 href형식
Link 방식은 SEO(search engine optimization) 즉 검색 최적화를 위해 많이 사용되고 Routing은 그외에 함수들을 실행 시킬때 많이 사용된다.

Link태그는 사용할 경우 자동적으로 다른 페이지로 넘어갈 때 많이 사용된다. 즉, 어떤 태그를 클릭해 다른 페이지로 넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link를 사용하는 것이 
좀더 효율적이고 실무에서 많이 사용하는 방식이라 한다.

반대로 라우팅 같은 경우는 함수를 동작시켜서 클라이언트에서 데이터를 request(요청) & response(응답)을 할때 등으로 자동으로 페이지를 넘기지 않을 경우 router:push & replace를 사용한다고 보면 된다.

오늘 공부를 돌아보며

1주일이 정말 빠르게 지나갔다.
벌써 수요일이야?라고 생각했었는데, 벌써 금요일이 지나고 주말을 앞두다니...
1주차 중후반에는 통신에 대한 것을 배우고 있는데, 퍼블리싱에 자신이 없어서 이 부분은 정말 잘해내고 싶은 마음이 있었다. 그러나 완성될만 하면 발생하는 오류들... ㅠㅠ
참 재미있게 배우고 있는데, 나도 오류 없이 잘 해내고 싶은 마음이 크다.

이번 주말에는 1주차 학습에 대한 전체적인 복습과
미흡한 부분을 찾아 보충하고
과제를 잘 해내고 싶다.