Dummy Data 리액트 라우팅 연습

오늘은 리액트의 라우팅연습을 해보았다 .

우선 Dummy를 만들고 그 후에 데이터의 값을 참조하여 useParams hook을 이용하여 라우팅을 구현했다.

군 복무로 인해 코딩을 잘 접하지 못하다보니 이것저것 기록하고 내가 쓴 글을 보고 다시 기억을 떠올릴 수 있게 하는 목적이다 .

서론이 길었으니 코드는 다음과같다.

{
  "days": [
    { "id": 1, "day": 1 },
    { "id": 2, "day": 2 },
    { "id": 3, "day": 3 }
  ],
  "words": [
    {
      "day": 1,
      "id": 1,
      "eng": "book",
      "kor": "책",
      "isDone": false
    },
    {
      "day": 1,
      "id": 2,
      "eng": "apple",
      "kor": "사과",
      "isDone": false
    },
    {
      "day": 2,
      "id": 3,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "day": 2,
      "id": 4,
      "eng": "pen",
      "kor": "펜",
      "isDone": false
    },
    {
      "day": 3,
      "id": 5,
      "eng": "table",
      "kor": "책상",
      "isDone": false
    },
    { "day": 3, "id": 6, "eng": "cap", "kor": "모자", "isDone": false }
  ]
}

위 코드가 Dummy Data를 간단하게 표현한 코드다 .

                    APP
                      | \
                  DayList Day
                  위와 같은 계층 구조이며 먼저 router구현을 위해 리엑트 라우터 돔을 사용했다. 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import React from "react";
import Header from "./Components/Header";
import DayList from "./Components/DayList";
import DayItem from "./Components/DayItem";

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />}></Route>
          <Route path="/day/:day" element={<DayItem />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

먼저 라우팅을 하기위해서 BrowserRouter, Routes, Route를 import 해준다.

Routes는 직접적으로 페이지를 이동시킬 Route태그의 부모태그정도로 Route를 감싸주면 된다.

Route는 직접적으로 우리가 path=""를 통해 어디로 이동시킬 것인지 , 정해진 path로 가면 어떤 Component를 보여줄 것인지의 대한 element=값까지 jsx로 정해줘야한다.

내가 구현하고 싶은것은 Day 목록 3개중 하나를 클릭하면 해당하는 day로 이동함과 동시에 day에 매칭되는 데이터를 화면에 띄워주고 싶은 것이다.

DayList Component로 이동해보겠다.

import React from "react";
import dummy from "../db/data.json";
import { Link } from "react-router-dom";

export default function DayList() {
  return (
    <>
      <ul style={{ display: "flex" }}>
        {dummy.days.map((day) => (
          <li style={{ listStyle: "none" }} key={day.id}>
            <Link to={`/day/${day.day}`}>Day{day.day}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

위코드는 "react-router-dom" 에서 제공하는 Link태그를 쓴다. 이게 컴파일되면 Link = a 랑 같아진다.

Link to = a href
위 코드는 Link to 로 day요소를 클릭 할 때 /day/${day.day}로 이동시킨다.
days배열의 객체 한줄한줄이 day가되고 그 객체안의 day의 값을 추출하고 싶은 것이다.
그 값을 추출하여 특정 값만 랜더링 하기 위함이다.

다음은 DayItem Component의 코드이다.

import React from "react";
import dummy from "../db/data.json";
import { useParams } from "react-router-dom";

export default function DayItem() {
  let { day } = useParams();
  const WordsList = dummy.words.filter((word) => word.day === Number(day));

  return (
    <>
      <strong>Day{day}</strong>
      <table>
        <tbody>
          {WordsList.map((word) => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

useParams를 이용하여 값을 추출하고 filter를 통해 데이에 해당하는 word만 가져오는 모습을 볼 수 있다.

정리하자면
1.day 1 day2 day3 를 클릭하면 day1에 해당하는 단어만 나와야한다.
2.그렇다면 클릭했을때 이동하여야하고 Link to를 Days배열에서 map을돌려 해결한다.
3.템플릿문자열을 통해 `/day${day.day} ` 로 해결해준다
4.router path에서 /day/:{내가 유즈파람즈로 받을 이름}
5.아이템 컴포넌트에서 useParams로 얻은 값으로 필터를 돌려 데이에 해당하는 데이터만 나오게끔

위와같은 느낌으로 라우팅을 처리하고 분기처리를 하면 될 것 같다. ㅣ