라우터 구현(react-router-dom)과 링크 연결

https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10

라우터 구현해보기

1. react-router-dom 설치

코딩앙마님 강의에서는 v5를 사용하셨기에 나 또한 강의를 별 문제 없이 따라해보고자 v5를 설치하였다.

v6 삭제 : npm uninstall react-router-dom
v5 설치 : npm install react-router-dom@5.2.0

2. import

App.js에 import 해준다.

import { BrowserRouter, Route, Switch } from "react-router-dom";

3. BrowserRouter, Switch사용

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <DayList />
          <Day />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

4. Route 사용

path를 사용할 때 "/"는 첫 페이지를 의미한다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/">  //👈 추가
            <DayList />     //👈 추가
          </Route>          //👈 추가
          <Day />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

아래의 코드에서 path="/day"는 day 페이지를 의미한다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/">
            <DayList />
          </Route>
          <Route path="/day">  //👈 추가
            <Day />			   //👈 추가
          </Route>			   //👈 추가
        </Switch>
      </div>
    </BrowserRouter>
  );
}

📌 exact 사용
Switch로 Route를 감싸놓으면 일치하는 첫 번째 결과 페이지를 보여준다.
그래서 "/day"에도 /가 들어있기 때문에 일치한다고 판단하여 첫 페이지를 "/day"페이지로 보여준다.
이 때 exact 를 사용하여 <Route exact path="/">라고 수정해준다.
그러면 "/"페이지를 첫 페이지로 잘 보여준다.

링크 연결해보기

React에서는 <a href=""></a>대신 <Link to=""></Link>를 사용한다.

1. import

Link를 사용하고자 하는 파일에서 import해준다.

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

2. Link 사용

개발자도구에서 태그를 확인해보면 a태그로 보이는것을 확인할 수 있다.

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

export default function DayList() {
  console.log(dummy);
  return (
    <ul className="list_day">
      {dummy.days.map((day) => (
        <li key={day.id}>
          <Link to="/day">Day {day.day}</Link>   //👈 추가
        </li>
      ))}
      <li></li>
    </ul>
  );
}

📌 TIP
Auto import 지원으로 <Link까지 입력하고 엔터 쳐도 자동 import 된다.

Link를 사용해서 더 수정해보자.

//Header.js
      <h1>
        <Link to="/">토익 영단어(고급)</Link> 
      </h1>

//DayList.js
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>

다이나믹한 url 처리를 위한 콜론(:) 사용과 useParams

1. react-router-dom에서 다이나믹한 url을 처리할때는 콜론을 사용하면 된다.

<Route path="/day/:day">

이렇게 사용하면
day라는 변수로 1의 값을 얻을 수 있고,
:id라고 사용하면 id라는 변수로 1의 값을 얻을 수 있다.

2. useParams 사용
1) import

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

2) useParams 사용

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

export default function Day() {
  //dummy.words
  const { day } = useParams();  // 👈 추가
  const wordList = dummy.words.filter((word) => word.day === day);

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

Route와 Link 연습

간단하게 404페이지라고 불리우는 페이지를 Route와 Link를 사용하여 작성해보자.

1. EmptyPage.js 생성 및 Link 사용하기
component 폴더에 EmptyPage.js를 생성하고 Link를 사용하여 아래의 코드를 작성한다.

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

export default function EmptyPage() {
  return (
    <>
      <h2>잘못된 접근입니다.</h2>
      <Link to="/">돌아가기</Link>
    </>
  );
}

2. Route 연결

path 작성은 하지 않는다.
사용하는 path 외의 경로로 들어올 때 보여줘야하는 페이지이기 때문이다.

또한 EmptyPage를 보여주기 위한 코드는 맨 아래에 작성해줘야 한다.
위에 작성하면 모든 페이지가 EmptyPage로 가게 되기 때문이다.

import Day from "./component/Day";
import DayList from "./component/DayList";
import Header from "./component/Header";
import "./index.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import EmptyPage from "./component/EmptyPage";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/">
            <DayList />
          </Route>
          <Route path="/day/:day">
            <Day />
          </Route>
          <Route>           //👈 추가
            <EmptyPage />   //👈 추가
          </Route>			//👈 추가
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;