페이지 이동하기, Routing
import {useRouter} from 'next/router'
const router= useRouter()
//useRouter 명령어 import와 편리한 사용을 위한 대입
router.push( '이동할 페이지(주소)' )router.push 명령어를 통해 이동할 페이지를 등록할 수 있고 상대주소를 적어 사용한다.
Static-Routing/ Dynamic-Routing
정적라우팅은 하드코딩 느낌으로 이동할 페이지의 수만큼 페이지(폴더)를 만들어줘야하기에 페이지 수가 많아지면 문제가 발생한다
동적라우팅은 폴더 이름을 대괄호 ' [ ] ' 로 감싸주는 폴더를 만들어서 사용할 수 있다.
이 경우 감싸준 폴더 안에는 index.js 하나의 파일만 존재하면 되며 하나의 파일만 만들어서 component를 적용시키고 파일의 세부 내용만 바꿔서 불러오는 방식
boards/1 (주소창에 입력하는 방식)
boards/[aaa] (실제 실행하는 폴더)ex) const router = useRouter() router.query={ aaa:1 }
Apollo-client/Query
query 문을 통해 서버에 정보를 요청할 때 코드 오류는 없는데 undefined 에러가 뜨는 경우가 있다.
이는 에러라기 보다는 작동 방식때문에 생기는 현상인데 JS는 기본적으로 비동기 통신 방식을 사용하기에 요청한 data를 불러오는 동안 화면에 표시할 내용이 없기 때문에 undefined를 출력한다.
이 현상을 해결하기 위해서 사용하는게 조건부 랜더링이다.
&&를 기호로 사용하며 데이터 로드가 완료되지 않았을 경우 &&을 기준으로 왼쪽의 데이터만 먼저 표시하고 로드가 완료되면 &&기준 오른쪽의 데이터를 출력한다
ex) 작성자: {data && data.fetchBoard.writer}data.fetchBoard.writer 의 로드가 완료되지 않았을 경우 data의 정보만 표시
옵셔널 체이닝을 사용해 위의 예시를 더 간략하게 표현할 수도 있다.
ex) 작성자: {data?.fetchBoard.writer}
