📖[React]라우터 구현,react-router-dom

혱·2022년 10월 15일

목록 보기

21/28

✔️ router 시작

npm install react-router-dom 5.2.0 을 이용하여 router 설치

App.js에서 import {BrowserRouter, Route, Switch} from 'react-router-dom';

App.js에서 return이후 전체를 <BrowserRouter> 로 감싸기

App.js에서 url에 의해 각각 다른 페이지를 보이는 부분만 <Switch>로 감싸주기
<Switch> 외부는 모든 페이지 공통으로 노출

<Router path='/'> 메인페이지 코드</Router>

<Router path='/url'> 바뀌는 페이지 코드</Router>
<Switch> 로 <Router> 들을 감싸면 일치하는 첫번째 결과를 보여줌.
즉, /url에도 /가 포함되어 있기 때문에 메인페이지 코드를 보여주는 것!
따라서 이런 경우에는 <Router exact path='/'> : 정확하게 /일때만 보여줌

✔️ router 연결

<html>은 <a> 사용 그러나 <Router>는 <Link to="/url">사용

url로 페이지 렌더링을 하고 싶은 부분에 <Link to="/url"></Link>로 묶음

해당 파일 위에 import {Link} from 'react-router-dom';

다양한 url에서는 <Router path='/url'>를 :을 이용하여 바꾸어줌

<Router path='/url/:day'>
day1로 들어왔을 때 day라는 변수로 1이라는 값을 얻을 수 있음
만약 id면 id의 변수로 1의 값을 얻을 수 있는 것!

✔️ useParams

Url 파라미터를 객체 형태로 조회

✔️ 예시

App.js

import "./App.css";
import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";
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 />
          </Route>
          <Route>
            <EmptyPage />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Header.js

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

export default function Header() {
  return (
    <div className="header">
      <h1>
        <Link to="/">토익 영단어(고급)</Link>
      </h1>
      <div className="menu">
        <a href="#x" className="link">
          단어 추가
        </a>
        <a href="#x" className="link">
          Day 추가
        </a>
      </div>
    </div>
  );
}

Day.js

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";
export default function Day() {
  //dummy.words 사용
  const wordList = dummy.words.filter((word) => word.day === Number(day));
  const day = useParams().day;
  // const {day} = useParams();

  console.log(wordList);
  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>
    </>
  );
}

DayList.js

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

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

EmptyPage.js

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

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

알아둘 것

현재 router는 v.6으로, <Switch>가 존재하지 않는다.
대신 이때는 <Routes> 를 이용해야 한다.

App.js

import './App.css';
import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import { BrowserRouter, Route , Routes } from 'react-router-dom';
import EmptyPage from './component/EmptyPage';

function App() {
  return ( 
      <div className='App'>
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" element={<DayList/>} />
          <Route path="/day/:day" element={<Day/>} />
          <Route path="*" element={<EmptyPage/>} />
        </Routes>
        </BrowserRouter>
      </div>
  );
}

비고...

코딩앙마님의 코드를 정말 처음부터 복붙한 것처럼 똑같이 따라하였다. 하지만, router가 실행되지 않았고 (url은 바뀌었지만 화면이 출력되지 않음) 코딩앙마님의 code를 clone한 뒤 내 것과 비교하기도 하고 새로운 vs code 창에서 새로운 파일을 만들어서 정말 똑같이 한 뒤 비교해보기도 하였다. 하지만 계속 해서 뜨는 것은 node_module에서 index.js 파일을 찾을 수 없다는 오류나 화면이 출력되지 않는 것이었다... 결국 node_moudule을 코딩앙마님 것과 비교해보았고 지금은 사용되지 않는 module 들이 있고 그것들이 router과 관련되어 있는 것 같다는 느낌을 받았다.
node의 공식 페이지에도 soure-map-resolve 등이 쓰이지 않는다는 것을 보여주고 있었다. 이미 router도 버전이 한 번 업데이트 되었고 그에 맞춰 node도 바뀐 것인지 전혀 router가 들지 않아 진짜 서치랑서치는 다 해보고 거의 3시간을 이 문제만 잡고 있었다... 그러나 아무리 생각해도 업데이트된 node와 router의 충돌이 아닐까? 라는 생각이 들었다. 코딩앙마님의 강의가 너무 좋지만 이런 부분에서는 꽤 아쉽다는 생각을 했고 일단 clone된 코드로 계속해서 강의를 듣고 이어나가고 어차피 짧은 강의니, 이후 react를 조금 더 공부(코딩애플 및 책)한 뒤에 v6을 이용해서 다시 한번 제대로 고쳐나갈 계획이다... 화이팅이다 에혀