Rrd-useLocation, useNavigate, useParams

useLocation

useLocation을 사용하면 현재 url 정보를 사용할 수 있다.
먼저 리액트 라우터 돔의 useLocation을 설치해준다.

import { useLocation } from 'react-router-dom';코드를 입력하세요

그후 변수에 location의 정보를 담아준다.

const location = useLocation();

콘솔에서 아래와 같이 확인할 수 있다.

console.log("useLocation:", location);

useNavigate

Link와 차이가 있다면 이벤트 핸들러 즉 버튼을 클릭하면 프로그래밍적으로 페이지를 이동시켜준다.

import {useNavigate} from 'react-router-dom'

 function Header(){
    const navigate = useNavigation(); 
    
 function buttonClicked(){
    navigate("/product")
 }
 
return(
 <button onClick={buttonClicked}>클릭하세요</button>

) 
 
 }
 
export default header

useParams

params: 주소 경로 내부에 특정 데이터를 넣어 전달하는 것. 크게 url 파라미터와
쿼리 스트링이 있다.

url 파라미터:
ID, 이름, 특정 데이터를 조회할때 사용,일반적인 변수, 상수 값들을 전달하기 용이.
: 으로 구분해주며 아래와 같이 id를 전달하면 해당값이 파라미터로 전달되어 이후에
사용할 컴포넌트에서 useParams 메서드를 통해 추출할 수 있다.

<Route path="/new/:id" element={<NewId />} />

쿼리스트링:
키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용.
key, value 형태의 데이터이므로 json이나 객체 형태의 데이터를 전달하기 용이.

useParams를 통해 컴포넌트에서 추출하는 예시

import React from 'react';
import { useParams } from 'react-router-dom';

const NewId = ()=>{
 let {id} = useParams();
 
 return(
 <div>
   <p>현재 유저의 아이디는 {id}입니다. </p>
 <div>)

}

export default NewId; 

그 밖의 개념정리

Browser router: history API를 통해 url과 ui를 주소로 동기화하는 라우터
Route: url과 현재 경로가 일치하면 해당하는 컴포넌트(=함수)를 랜더링
Link: to속에 설정된 경로로 이동, 기록이 history에 저장
Switch: BrowserRouter만 사용할 떄와 다르게 하나의 매칭되는 요소만 핸더링. 사용하지 않늘 경우에는 매칭되는 모두를 랜더링