[JUSTCODE] Advanced Foundation - React dvanced Router

라우팅

다른 경로에 따라 다른 view(화면)을 보여주는 것.

 

정적 라우팅

정해진 경우에 대해서만 경로를 표현하는 것.

"/"         => <App />
"/users"    => <Users />
"/products" => <Products />

 

동적 라우팅

무수히 많은 view를 띄우기 위해서 경로 끝에 id값에 따라 특정 페이지로 이동하는 것.

 

동적라우팅의 처리방법

Path Parameter

형태 : 경로/:id

"/users/:id" => <Users /> //

function Users() {
  const params = useParams();
  console.log(params.id);

  return <>{params.id}</>
}

 

id를 가져오는 hooks

const navigate = useNavigate();
const location = useLocation();
const params = useParams();

const productId = params.id;
<Link to="" />
navigate(`/product/${productId}`);

// { navigate: {}, location: {}, params: {}, ... }
console.log({ navigate, location, params }) 
return (
	...
);

• useNavigate : 페이지 이동을 위한 여러 메서드
• useLocation : 현재 url의 경로에 관한 정보를 가져온다.
• useParams :Path Parameter에 관한 정보를 가져온다.

 

Query Parameter

형태 : 경로/키?값

"/search?keyword=something" : <Search /> // useLocation().search

 

 

Pagination(Paging)

백엔드에서 가지고 있는 많은 데이터를 한번에 화면에 다 보여줄 수 없기 때문에 Front-end에서는 현재의 위치(Offset)와 보여줄 컨텐츠 수(limit)를 Back-end에 넘겨준다. 그리고 그에 맞춰 끊어서 데이터를 보여준다.

 

구현방법

Query Parameter

http://localhost:8000/product?limit=10&offset=5&

 

useLocation().search

// current url -> localhost:3000/products?offset=10&limit=10

function ProductList() {
	const location = useLocation();

	console.log(location.search); // ?offset=10&limit=10

	return (
	   ...				
	)
}

쿼리스트링에 대한 정보는 location에 담겨있다.

fetch(`${API}/resources${location.search}`)
	.then(res => res.json())
	.then(res => {
		setState(prev => [...res]);
	})

위와 같이 url에서 쿼리스트링에 대한 정보를 가져와 해당 정보를 통해 데이터를 요청할 수 있다.