useNavigate useLocation useParams

npm i react-router-dom

react-router-dom 에서 제공. 가장 유용하게 많이 쓰임.

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

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로 라우팅 시스템을 갖추고 있지 않기때문에, react-router-dom과 같은 부가적인 라이브러리를 통해 라우팅 기능 추가

정적 라우팅

정해진 pathname에 대해서만 경로를 표현 가능.

// Router
 	<Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<AuthLogin />} />
        <Route path="/create" element={<AuthCreate />} />
        <Route path="/product" element={<Product />} />
        <Route path="/mypage" element={<MyPage />} />
        <Route path="/cart" element={<Basket />} />
        <Route path="/wishlist" element={<WishList />} />
	</Routes>

/prouduct라고 정확한 라우팅이어야지만 path가 넘어간다. /products라고 하면 안넘어감.

현재 우리가 이용 혹은 사용하고 있는 웹페이지들은 대부분 동적인 웹페이지들로 구성되어있다 간단히 말하자면 사용자의 요청 시간 상황에 따라 다른 웹페이지들을 보여준다. 하지만 예를 들어 쇼핑몰 사이트가 있고 나는 Product라는 컴포넌트에 다양한 상품들을 사용자에게 보여주었다. 사용자는 각 상품들마다의 특징을 알고싶어 상품의 디테일 페이지를 보여준다. 만약 위의 같은 정적 라우팅으로만 정보를 제공한다면 정말 지옥일것이다. 데이터 수만큼의 디테일 페이지가 필요할 것이지만 우리는 사용자의 편의와 보다 정확하고 많은 데이터를 효과적으로 전달하기위해 동적인 웹페이지로 구성할 필요또한 있다. 해결방법은 동적 라우팅이다.

동적 라우팅

EX) 상품 리스트 페이지 => 상품 디테일 페이지
상품 리스트 페이지에서 여러개의 상품 디테일 페이지를 만드는것이 아닌 url의 끝에 해당 아이템의 id값이 추가 되어 페이지를 이동시킬 수 있다. 라우트 경로에 특정 값 path parameter값을 넣어 해당 데이터 id값에 페이지로 이동할 수 있게 해주면 된다.

Path Parameter

라우트 끝에 들어가는 각기 다른 id값, url 경로에서 달라지는 부분을 저장하는 매개 변수를 PathParameter

 <Route path="/product/:pageId" element={<Detail />} />

: 는 PathParameter가 올 것임을 의미한다.
pageId는 해당 PathParameter의 이름을 의미한다.

EX) 상품 페이지 => 가격이 높은순에 상품 페이지
가격이 높은 순 낮은 순에 여러개의 상품 페이지를 만드는 것이 아닌 url 끝 ?뒤에 값 query값이라고 부른다 query를 통해 다양한 상품페이지를 보여주게 할 수있다.

Query Parameter

const url= = "www.naver.com/product/?key=value //? 뒤에가 query

useNavigate

useNavigate 훅의 리턴값 함수 페이지를 이동시키는(url 변경) 함수를 반환

import { useNavigate } from "react-router-dom";
const navigate = useNavigate()
const onClickProduct = () => {
return navigate('/proudct'
}     
<div onClick={onClickProduct}>이동</div>

useNavigate를 이용해 우리는 url을 이동할 수 있다 그 말은 즉시 동적라우팅을 구현하는데 굉장히 자주 쓰인다는 것일 것이다.

useParams

pathparameter 정보를 담고있는 객체이다. 이 hook을 사용해 url에 pathparameter를 가져와 상품페이지 => 상품디테일 페이지를 구현할 것이다.

// Router
 <Route path="/product/:pageId" element={<Detail />} />

// useNavigate
import { useNavigate } from "react-router-dom";
const navigate = useNavigate()
const onClickProduct = () => {
return navigate('/proudctdeatil/${상품데이터ID}'
}     
<div onClick={onClickProduct}>이동</div>

// useParams
import { useParams } from "react-router-dom";
const params = useParams()
console.log(params) // {pageId: value 값}
const {pageId} = useParams() // 구조분해 할당

Router에 pathparameter를 설정해준다. useNavigate를 이용해 pathparameter를 포함시켜 url을 이동시킨다. useParams를 이용해 pathparameter값을 가져온다. 그 후 useParams를 이용해 가져온 pathparameter값을 서버에 보내 알맞은 데이터를 받아온다.

useLocation

useLocation 훅의 리턴값 현재 경로 정보를 담고있는 객체이다. 이 hook을 사용해 url에 queryparameter를 가져와 상품페이지 => 가격높은순에 상품페이지를 구현할 것이다.

import {useNavigate} from "react-touer-dom"
const onClickQuery = () => {
	navigate('/product?sort="가격높은순"')

import {useLocation} from "react-router-dom"
const location = useLocation();
console.log(location)
//{
//pathname: '/product', // 현개경로 값
//search: 'sort="가격높은순"', // query parameter값
//hash: '',
//state: null,
//key: 'default'
//}
console.log(location.search)
// sort="가격높은순"

navigate로 url을 이동시킨후 useLocation hook을 사용해 location.search를 사용 쿼리파라미터의 값을 가져와 서버에 보낸다. 서버에서는 클라이언트에 요청에 맞게 알맞은 데이터를 response를 해 줄 것이다.