react-router-dom?

우선 Router Dom이란 URL의 링크에 따라 Component를 생성해 주는 것이다.
react는 SPA인데, 하나의 링크로 사용자에게 페이지를 보여줄 수 있지만 특정 페이지로 이동하려고 할 때 Router Dom을 사용하게 된다.
react-router-dom을 사용하면 SPA의 장점인 페이지가 깜빡이지 않는 것을 페이지가 이동할 때에도 깜빡이지 않게 할 수 있다.

react-router-dom 설치

아래 명령어를 통해 패키지 설치 가능

yarn add react-router-dom 

hooks

useNavigate?

다른 페이지로 보내고자 할 때 사용할 수 있다.
html에서 a tag와 상당히 유사한데
버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작서하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동시킬 수 있다.
꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용이 가능하다.

1. navigate를 생성
2. navigate('보내고자하는 url')을 통해 페이지를 이동

// 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;

useLocation

react-router-dom을 사용하면, 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다. 이 정보들을 사용해 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용이 가능하다.

// 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;

useParams ?

useParams는 path에 있는 (:<여기 있는 값>) 이름으로 값을 조회할 수 있게 해주는 훅!

그래서 만약 works/1로 이동하면 useParams로 값을 빼면 1이라는 값을 주고, works/100로 이동하면 100이라는 값을 준다.

사용 코드

shared > data.js

export const data = [
  {
    id: 1,
    toDo: '리액트 배우기',
  },
  {
    id: 2,
    toDo: '노드 배우기',
  },

  ...
];

shared > Router.js

... 
{/* useParams를 사용하기 위해 ':id'를 준다 */}
<Route path="works/:id" element={<Work />}></Route>

...

pages > Works.jsx

...
{/* map을 통해 work component와 연결된 Link tag 뿌리기 */}
{data.map((item) => {
        return (
          <div key={item.id}>
            {item.id}&nbsp;
            <Link to={`/works/${item.id}`}>{item.toDo}</Link>
          </div>
        );
      })}
...

pages > Work.jsx

import React from 'react';
import { useParams } from 'react-router-dom';
import { data } from '../shared/data';

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

  // 어떤 todo인지 찾아보기
  // 조건에 맞는 것만 return
  const foundData = data.find((item) => {
    console.log('item.id : ', item.id); // type: int
    console.log('params.id : ', params.id); // type: string
    return String(item.id) === params.id;
  });

  console.log(foundData);
  // id 값에 따라 동적으로 출력이 가능하다!
  return <div>{foundData.toDo}</div>;
}

export default Work;