[React] React Router Dom(2) : 페이지 이동 & useParams, 유동적 path

 

 

💡동적 라우팅 Dynamic Route

path 에 유동적인 값을 넣어 특정 페이지로 이동하게끔 구현한 방법

 

이렇게 페이지들을 하나씩 지정해주는게 아니라

works/ 뒤 숫자들을 유동적으로 파라미터로 받아 오게 해보자!

 

1. 먼저 Router.js 에서 works/:id 를 적어준다.

 

 

2. Work.js 에서 useParams 를 연결

 

그럼 이동한 페이지의 id 를 얻을 수 있다!

 

Router.js 에서 넣어준 id 가 객체에 들어가 있다.

const { id } = useParams(); // 이런 식으로 가져올 수 있다.

 

 

3. 테스트 할 데이터 파일을 하나 만든다.

Data.js

export const data = [
  {
    id: 1,
    todo: "리액트 공부",
  },
  {
    id: 2,
    todo: "노드 공부",
  },
  {
    id: 3,
    todo: "스프링 공부",
  },
  {
    id: 4,
    todo: "파이어베이스 공부",
  },
  {
    id: 5,
    todo: "데이터베이스 공부",
  },
];

 

 

4. Works.jsx 에 데이터 가져와 리스트 만들기 & 각 todo 의 아이디로 링크 연결

import React from "react";
import { Link } from "react-router-dom";
import { data } from "../shared/Data";

function Works() {
  return (
    <div>
      <h1>Works</h1>
      <h3>todo!</h3>
      <ul>
        {data.map((todo) => {
          return (
            <li key={todo.id}>
              {todo.id} : <Link to={`/works/${todo.id}`}>{todo.todo}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Works;

사실 여기서(/works 페이지에서) 저 링크를 눌러야 works/:id 로 이동하면서

Work.js 의 params 를 얻어올 수 있는 것.

 

5. Work.jsx 에서 데이터들 중 링크의 아이디와 같은 것만 찾아내기

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

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

  const foundData = data.find((todo) => {
    console.log(todo.id); {/*숫자 1, 2, 3, 4, 5*/}
    console.log(params.id); {/*문자 1, 2, 3, 4, 5*/}
    return todo.id === +params.id; {/*숫자로 형변환 해줘야 함*/}
  });

  console.log(foundData); {/*{id: 1, todo: '리액트 공부'}*/}

  return (
    <div>
      <h3>todo : {foundData.todo}</h3> {/*찾은 데이터에 따라 다른 todo 출력*/}
    </div>
  );
}

export default Work;