[React] 페이지네이션

1. Routing

1-1. 경로에 따라 각기 다른 화면을 보여주기

route + -ing : 경로(route)를 찾아가는 행위

즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.

1-2. SPA (Single Page Application, 단일 페이지 애플리케이션)

사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림.

SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공.

React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로(라이브러리!), react-router-dom 과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가할 수 있다.

2. 동적 라우팅

지금까지 해온 라우팅 방법으로는 완전히 정해진 경우(정적, static)에 대해서만 경로를 표현 할 수 있었습니다.

"/" =>
"/users" =>
"/products" =>

하지만 다음과 같은 경우라면 어떨까요?

id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지는 것을 볼 수 있습니다.

이는 다음 두 가지 개념(Path Parameter, Query Parameter)을 통해 적용해볼 수 있습니다.

2-1. 동적인 라우팅을 처리하는 방법

동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 이 있습니다.

1) Path Parameter

// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />

// Good
"/users/:id" => <Users /> // useParams().id

2) Query Parameter

// Bad
"/search?keyword=위코드" :
"/search?keyword=리액트" :
"/search?keyword=라우팅" :
"/search?keyword=쿼리스트링" :
"/search?keyword=SPA" :
// Good
"/search?keyword=something" : // useLocation().search