동적라우팅

✅ 동적라우팅으로 상품 페이지 구현하기

✍️ react-router-dom을 이용한 동적 라우팅 구현

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Monsters />} />
        <Route path='/detail/:id' element={<Monster />} />
      </Routes>
    </BrowserRouter>
  );
}

위 코드와 같이 Route를 설정하게 되면 /detail/ 뒤에 어떤 글자가 와도 모두 상세페이지 컴포넌트를 보여준다.
:기호 뒤에 붙는 id와 같은 문자열을 path parameter라고 부른다.

Path Parameter의 활용

👉 useParamas hook

useParams hook은 path parameter의 값을 가져올 수 있으며 state처럼 path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공한다.

useParams hook을 호출하면 path params의 값을 객체형태로 반환해준다.

• 객체 프로퍼티의 key값 : Route에서 설정한 path parameter의 이름
• 객체 프로퍼티의 value 값 : path parameter에 실제로 전달된 값

---

✍️ 활용예시

1️⃣ 메인 컴포넌트에서 리스트 컴포넌트 표시

전체 상품리스트를 보여준다. 이때 상품에 대한 리스트는 api를 통해서 가져온다.

function Monsters() {
  const [monsters, setMonsters] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/")
      .then((res) => res.json())
      .then((res) => setMonsters(res));
  }, []);

  return (
    <div className='monsters'>
      <h1>Assignment - Dynamic Routing</h1>
      <CardList monsters={monsters} setMonsters={setMonsters} />
    </div>
  );
}

export default Monsters;

2️⃣ 리스트 컴포넌트

카드 컴포넌트를 클릭하면 해당 유저의 상세페이지로 이동하도록 Link컴포넌트를 사용한다.

function CardList({ monsters, setMonsters }) {
  let params = useParams();
  console.log(params.id);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
      .then((res) => res.json())
      .then((res) => setMonsters(res));
  }, []);

  return (
    <div className='cardList'>
      {monsters.map(({ id, name, email }) => {
        return (
          <Link key={id} to={`/detail/${id}`}>
            <Card id={id} name={name} email={email} />;
          </Link>
        );
      })}
    </div>
  );
}

export default CardList;

3️⃣ 상세페이지 컴포넌트

function Monster() {
  const [monster, setMonster] = useState({});

  let params = useParams();
  console.log(params.id);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/`)
      .then((response) => response.json())
      .then((result) => setMonster(result));
  }, [monster]);

  return (
    <article className='monster'>
      <div className='btnWrapper'>
        <Link to='/'>
          <button>Back to Monsters List</button>
        </Link>
      </div>
      <Card />
      <div className='btnWrapper'>
        <button>Previous</button>

        <button>Next</button>
      </div>
    </article>
  );
}

export default Monster;