1. useNavigate() : 브라우저에 직접 path를 입력하지 않고 페이지 이동할 수 있는 Hook
2. useLocation() : 현재 위치하는 페이지에서 여러 정보를 추가적으로 얻을 수 있는 Hook
3. Link : html 태그 중 a태그 기능을 대체하는 API (Hook은 아님)
4. useParams : path에 있는 각각의 고유한 id값을 조회할 수 있는 Hook

1. useNavigate()

• 페이지 이동을 위한 Hook
• 브라우저에서 직접 path를 입력하지 않고, 어떤 버튼을 누르면 보내고자 하는 path로 페이지를 이동할 수 있음.
  ㄴ 컴포넌트의 클릭 이벤트 핸들러를 통해 활용 가능

**사용법**
  
// src/pages/home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

2. useLocation()

• 현재 위치하는 페이지의 여러정보를 추가적으로 얻을 수 있음.
• 이 정보를 이용해서 페이지 안에서 조건부 렌더링 등 어려가지 용도로 활용할 수 있음.

**사용법**
// src/pages/works.js
import { useLocation } from "react-router-dom";

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
    </div>
  );
};

export default Works;

=> 콘솔 로그로 'location'을 찍어보면 key가 pathname, search, state, key인 한 객체가 찍힌다.

3. Link

• 훅은 아니지만, 알아둬야 하는 API
• html 태그 중 a태그를 대체할 수 있음.
• jsx에서는 a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침 되고, 새로고침 되면 모든 컴포넌트가 다시 렌더링 되어야 하고, 모든 상태값이 초기화됨.
  ㄴ 반드시Link를 사용해서 구현해야 함.
• 사용법: <Link to="/contact">contact 페이지로 이동하기</Link>

4. Dynamic Routes 와 useParams

1) Dynamic Routes

<Route path="works" element={<Works />} />
<Route path="works/:id" element={<Works />} />

• :id는 동적인 값을 받겠다는 의미이면서, useParams 훅(Hook)에서 조회할 수 있는 값
• works/1로 이동해도, works/2, works/3 ... works/100으로 이동해도 모두 로 이동하게 됨.

2) useParams

• 같은 컴포넌트를 렌더링하더라도 path에 있는 각각의 고유한 id 값을 조회 가능
• useParams 훅을 썼을 때 param.id를 콘솔로 찍어보면 {id: '1'} 이런 식으로 id값이 문자열이 나오므로 find, filter 등 id값을 비교할 때 해당 값을 숫자로 변환해주는 parseInt() 함수를 사용해 줄 필요가 있다.

**예시**
// src/pages/Work.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;