Routing이란?
- 다른 경로(url 주소)에 따라 다른 화면(view)을 보여주는 것
- 리액트는 기본적으로 라우트 시스템이 없어서 리액트 라우터 돔을 사용한다.
정적 라우팅
컴퍼넌트 지정된대로 이동하는 것을 정적 라우팅이라 한다.
- "/" =>
<App /> - "/users" =>
<Users /> - "products" =>
<Products />
동적 라우팅
경로를 지정해주지 않았는데도 다른 경로를 가져와서 화면에 뿌릴 수 있게 해주는 것이 적 라우팅이다.
동적 라우팅을 처리하는 두 가지 방법
1. Path parameter
: 상세 페이지처럼 하나로 들어갈 때 사용!!
www.wanted.co.kr/wd/52179 // 앤드포인트 뒤에 52179가 path parameter이다. 2. Query parameter(string)
: 필터링, 검색할 때 사용!!
"/search?keykeyword=위코드" <Search keyword=위코드" />
"/search?keykeyword=위코드&&keykeyword=위코드" 이렇게 여러 개 쓸 수있음
앤드포인트 뒤에 / 대신 ?로 시작하고 keyword=valueHooks
1. useNavigate()
- url 변경 시켜주는 것.
- 주로 Path parameter와 같이 사용한다.
- 사용시 변수에 담아줘야한다.
function Product(props) {
const navigate = useNavigate();
const goToDetail = () => {
navigate(`/product/${props.id}`);
}
return (
<div className="productContainer" onClick={goToDetail}>
...
</div>
)
}인자에 정수값을 넣어주면 브라우저 방문 기록에 남아있는 경로들을 앞 뒤로 탐색할 수도 있다
navigate(-1); // 뒤로 가기
navigate(-2); // 뒤로 2페이지 가기
navigate(1); // 앞으로 가기2. useLocation()
- 주로 Query parameter와 같이 사용한다.
function ProductDetail(props) {
const location = useLocation();
console.log(location);
return (
...
)
}3. useParams()
- useParams 훅을 실행하면 path parameter 정보를 담고 있는 객체를 반환한다.
- 디테일 페이지에서 데이터를 받아 올 때 해당 데이터 id만 뽑아올 수 있다.
// 현재경로: /product/1
function ProductDetail(props) {
const params = useParams();
console.log(params);
return (
...
)
}console 출력값
{
id: 1
}여기서 id 라는 프로퍼티 키 네임은 Router 에서 :id 로 표기해준 값이다.
<BrowserRouter>
<Routes>
<Route path='/product/:id' element={<ProductDetail />} />
</Routes>
</BrowserRouter>정리
useNavigate url을 변경하는 함수를 반환하고,
useLocation 현재 경로 정보를 담고 있는 객체를 반환하고,
useParams Router 에 등록해준 path parameter 정보를 담고 있는 객체를 반환한다.
Pagination이란?
- 스크롤이 특정 위치까지 가면 몇 개씩 데이터를 받아오는 것
- 버튼을 누르면 10개씩 데이터를 끊어서 가져오는 것도 페이지네이션이다.
- limit - 한 페이지에 보여줄 수
- offset - 데이터가 시작하는 위치
(참고: stay polio)
Pagination을 쓰는 이유
- 유저가 브라우저에 접속해서 페이지에 들어갔는데 홤녀이 안뜨면 떠나기 때문이다.
(연구 결과에 따르면 평균 3초면 유저는 페이지를 떠남) - 한 번에 1억 개의 데이터를 가져오면 화면에 그리는 시간이 오래 걸리기 때문에 유저 사용성이 좋지 않음
