[ 17 ] Next.js static 라우팅 실습하기

useRouter

router.push() 를 활용해 페이지를 이동한다.

import { useRouter } from "next/router";

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

  const onClickMove = () => {
    router.push("/section05/05-01-static-routing-moved");
  };
  return (
    <div>
      <button onClick={onClickMove}>페이지 이동하기</button>
    </div>
  );
}

 

게시판 목록 ,  상세조회 느낌 구현해보기

import { useRouter } from "next/router";

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

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

 

상세 페이지 접속시 자동으로 데이터 불러오기 

import { useQuery, gql } from "@apollo/client";
import { title } from "process";
import { writer } from "repl";

const FETCH_BOARD = gql`
  query {
    fetchBoard(number: 3) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARD);

  console.log(data);
  return (
    <div>
      <div>3번 페이지 이동이 완료되었습니다.</div>
      <div>작성자 : {data?.data.fetchBoard?.writer}</div>
      <div>제목 : {data && data.fetchBoard.title}</div>
      <div>내용 : {data && data.fetchBoard.contents}</div>
    </div>
  );
}

 

?. // ?? // && // || 비교

&&

앞의 값이 참일 때에만 뒤의 값을 반환한다. ( 앞의 값에 문제가 없을 때 , 뒤를 반환해줘 )

 

?.

객체의 속성 이 존재하면 그 속성값을 , 존재하지 않으면 undefined 를 반환한다.

||

falsy 값을 가졌을 때 , 뒤의 요소를 반환한다 ( 문제가 생겼을때 , 이걸 반환해줘 ) 

 

??

|| 연산과 비슷하지만 undefined 와 null 값 일때만 , 뒤의 요소를 반환한다 ( 값이 비어있을때 , 이걸 반환해줘 )

받아온 데이터는 어떻게 자동으로 리렌더링 되는걸까?

 

상세 페이지 접속 시 useQuery로 data를 받아오지만 , 우리는 data를 상태변수로 정의해 준적이 없다. 그럼에도 불구하고 data가 undefined에서 실제 데이터 값으로 바뀌게 되면 화면도 자동으로 리렌더링 된다.

그 이유는 useQuery 내부에서 data라는 상태 변수를 관리하고 있고, 이 상태변수 data에 변경사항이 생기면 이제 React가 이를 감지하게 되고 다시 렌더링이 되게 된다.