⚛️Start! React : section10 - Route

*처음부터 이전 포스팅에서 컴포넌트를 외부와 내부 또는 상위와 하위라는 단어를 혼용해 사용했지만 이해를 위해 이제는 상위와 하위로 통일해 사용할 것이다.

react router dom은 a태그와 같은 역할을 한다. url의 값을 변경할 있다는 것이다. 예전에는 switch를 import해서 Router를 동시에 사용했지만 현재는Routes로 변경되었다. 그리 어렵지는 않으니 찾아보면 쉽게 따라 할 수 있을 것이다. 먼저 App컴포넌트를 살펴보자.

* ClassApp.js

 

import Day from "./component/Day";

import DayList from "./component/DayList";

import Header from "./component/Header";

import EmptyPage from "./component/EmptyPage"

import { BrowserRouter, Route, Routes } from 'react-router-dom'

function ClassApp() {

  return (

    <BrowserRouter>

      <div className="App">

        <Header></Header>

        <Routes>

          <Route exact path="/" element={<DayList />}></Route>

          <Route path="/day/:day" element={<Day />}></Route>

          <Route path="*" element={<EmptyPage />} />

        </Routes>

      </div>

    </BrowserRouter>

  );

}

export default ClassApp;

 

BrowserRouter는 Router와 Routes를 사용하기 위해서 있는 태그이다. 부모 태그로 두고 그 안에 Route와 Routes를 사용하면 된다. 우선 Route를 포함하고 있는 Routes를 BrowserRouter 부모 태그 아래 자식 태그로 설정해야한다. 이후 Routes안에 Route태그를 사용해서 각 컴포넌트들에 path를 부여해서 url을 생성할 수있게 하는 것이다. 이 태그들의 역할은 url을 부여할 수 있는 것 뿐만아니라 랜더링의 순서를 정하는 역할을 하기도 한다. Day컴포넌트를 포함하고 있는 Route의 path를 보면 /day/:day로 작성이 되어 있는데 동적으로 url값을 받기위해서 사용하는 것이다. 이제 하위 컴포넌트들을 하나씩 살펴보자. 우선 /day/:day url을 전달 해주고 있는 DayList 컴포넌트를 먼저 보자.

이상하게도 /day/:day의 url을 가지고 있는 상위 컴포넌트는 Day 컴포넌트인데 왜 DayList를 먼저 보는지 의아해 할 것이다. 그 이유는 코드를 보면 알 수 있다.

 

import { Link } from "react-router-dom"

import dummy from "../db/data.json";

export default function DayList() {

  return (

    <ul className="list_day">

      {dummy.days.map(day => {

        return (

          <li key={day.id}>

            <Link to={`/day/${day.day}`}> Day {day.day} </Link>

          </li>

        )

      })}

    </ul>

  );

}

 

DayList는 브라우저에서 각 Day별로 파트를 나누고 있는 Nav바와 같은 역할로 존재한다. 즉, 해당 Day별 단어장으로 이동할 수 있는 버튼과도 같은 것이다. 그래서 /day/:day의 url은 Day가 가지고 있는 것이지만 이를 연결해주는 역할은 DayList이기 때문에 DayList를 먼저 살펴보는 것이다. 앞서 말했 듯이 DayList는 각 해당 단어장의 Day로 연결해준다 했다. 단순 html로만 보았을 땐 a태그를 사용하겠지만 해당 수업에서는 React의 Routes를 사용했기 때문에 이 환경에 맞춰서 우리는 Link를 사용한 것이다. React의 장점인 SPA의 특징을 잘 보여주는 예시이다. 새로고침을 하지 않고 바로 새로운 창으로 이동이 가능하다. 이제 Day컴포넌트를 살펴보자.

 

import dummy from "../db/data.json";

import { useParams } from "react-router-dom";

export default function Day() {

  // const { day } = useParams();

  const day = useParams().day;

  const wordList = dummy.words.filter(word => word.day === Number(day)); //1일차 dummy data를 가지고 온다.

  return <>

    <h2>Day {day}</h2>

    <table>

      <tbody>

        {wordList.map(word => {

          return (

            <tr key={word.id}>

              <td>{word.eng}</td>

              <td>{word.kor}</td>

            </tr>

          )

        })}

      </tbody>

    </table>

  </>;

}

 

여기서 우리가 유심히 보아야하는 것은 useParams이다. useParams는 동적인 세그먼트(부분)를 Route태그가 있는 상위 컴포넌트를 파싱해서 해당 값을 가져오는 Hook이다. 여기서 .day를 지정했는데 이는 즉, /day/:day부분의 콜론뒤의 있는 day를 의미한다. 만약 콜론 뒤에 있는 day의 값을 Day라고 변경한다면 제대로 인식하지 않고 오류가 날 것이다. 정리해보면 DayList로 부터 전달 받은 데이터의 day.day인 값을 url path로 전달 받아 Day컴포넌트에서 useParams로 해당 값에 맞는 data를 브라우저에 띄우게 되는 것이다. 여기서 문제 였던 것은 내가 해당 강의 github에서 받아온 json파일에 조금의 문제가 있었다. 바로 day의 값이 어떤것은 String으로 되어 있고 어떤 것은 Number 로 되어 있었다. 그래서 특정 Day부분의 데이터 자료가 브라우저에 나타나지 않았다. 강의에서는 이를 고려해서 useParams로 받아온 값인 day를 오로지 Number로만 받아올 수 있게 되어 있다. 따라서 이에 맞춰서 잘못된 json파일 day의 일부분을 Number타입으로 다시 수정 했다.

내가 이전 시간에 만든 방식은 url을 고려하지 않고 오로지 동적인 것에만 집중한 것이였다. 만약 url의 값이 필요 없이 동적으로만 작동을 해야하는 부분이라면 이전에 내가 사용했던 방식을 사용해도 무관할 것 이다.