React에서의 라우팅
라우트에 관련된 다양한 컴포넌트를 react-router-dom으로부터 추가한다.
NextJS 라우팅
- React 라우터 설치 안함
- 라우트와 페이지 구조를 정의하는 데 JSX나 JS 코드를 사용하지 않음
- 리액트 컴포넌트 파일 생성, 그 후 NextJS가 설정된 폴더 구조로부터 프로젝트의 라우트를 도출해 내도록 만듦
/pages폴더를 사용- NextJS가 라우트 구조를 도출하기 위해 이 폴더를 자동으로 확인하게 됨
예시
— 📁pages
— 📄index.js → 메인 시작 페이지 (my-domain.com/)
— 📄about.js → About 페이지 (my-domain.com/about)
— 📁products
— 📄index.js → 모든 products 페이지 (my-domain.com/products)
— 📄list.js → 상품 리스트 페이지 (my-domain.com/products/list)
— 📄[id].js → 상품 상세 페이지 (my-domain.com/products/1)
- NextJS는
pages폴더를 확인하고 지원하고자 하는 라우트가 몇 개인지 추론 index.js확인하고 my-domain.com/으로 보내는 요청의 시작 페이지임을 추론about.js를 보고 About 페이지를 로딩해about.js파일 내에 반환된 컴포넌트를 렌더링하는 것으로 추론
동적 페이지
파일 이름을 경로로 취한다. (
index.js는 예외)
예시 :[id].js
대괄호 : 동적 경로를 추가하는 데 사용되는 특별 표기법
만약 my-domain.com/products/list 입력하면 list.js 파일 불러옴 ➡️동적 페이지 파일보다 이미 정의된 정적 라우팅 페이지 파일을 우선한다!
그럼 동적 페이지로 얻을 수 있는 이점은?
여러 종류의 데이터를 불러와야 하는 페이지를 생성할 때 👍(온라인 스토어 상품, 블로그 게시글)
컴포넌트에 입력한 이름과 일치하는 프로젝트 Id를 사용해서 DB 접근해 화면 출력
중첩된 동적 경로
대괄호를 이용해 동적 경로를 중첩할 수 있음.
예시
— 📁pages
— 📄index.js → 메인 시작 페이지 (my-domain.com/)
— 📁[portfolio] → (my-domain.com/asdasdasdasd)
— 📄[projectId].js → (my-domain.com/asdasdasdasd/dasdasd)
placeholder에 아무거나 넣으면 그 페이지로 이동됨
Catch-all 라우트
모든 라우트를 한 번에 확보하는 방식
단일 세그먼트 값만 동적으로 작동하는 게 아니라 세그먼트의 개수도 동적으로 작동한다.
예시
— 📁pages
— 📁blog → (my-domain.com/blog)
— 📄[…slug].js → (my-domain.com/whatever/you/want)
대괄호 안에 JS의 스프레드 연산자처럼 … 을 입력 후 파일 생성
import { useRouter } from "next/router";
function BlogPostPage() {
const router = useRouter();
console.log(router.query);
return (
<div>
<h1>블로그</h1>
</div>
);
}
export default BlogPostPage;localhost:3000/2020/12 로 접속했을 때 콘솔창
console.log(router.query);
{
"slug": [
"2020",
"12"
]
}➡️확보한 각 세그먼트의 문자열을 배열로 나타낸다.
-
첫 세그먼트로 2020이 있고, 다음으로 12가 있음. (URL 안에서
/로 구분) -
마침표 세 개를 통해 해당하는 경로를 모두 렌더링하도록 정의했기 때문에 NextJS는 /blog 뒤에 무엇이 붙든 페이지를 렌더링한다.
-
/blog/ 형식의 모든 URL을 페이지 컴포넌트가 처리하고 라우터 객체 내 query 객체에 있는 slug 프로퍼티를 통해 활용할 수 있는 배열도 생성한다.
-
이 값들은 데이터베이스에 요청을 보낼 때 사용하거나 2020년 12월에 올린 블로그 게시물 필터링할 때 사용 가능
