React_Router 기본

npx create-react-app react-router-dom-example

react-router-dom-example 디렉토리에 project 시작해보자.

생성후, index.css의 내용과 index.js에 import한 App을 지우고, 위에 컴포넌트 App()을 만들자.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

function App() {
  return <div>Hello React Router Dom</div>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

동일한 구조의 3개 컴포넌트를 만들고, App()에 넣어주자.

function Home() {
  return (
    <div>
      <h2>Home</h2>
      Home...
    </div>
  );
}

function Topics() {
  return (
    <div>
      <h2>Topics</h2>
      Topics...
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>React Router Dom example</h1>
      <Home></Home>
      <Topics></Topics>
      <Contact></Contact>
    </div>
  );
}

---

- 설치

 

npm install react-router-dom

---

- BrowserRouter, Route, Routes

 

BrowserRouter

: 우리가 router를 사용하고 싶은 최상위 컴포넌트를 감싸주는 wrapper component

 

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

function App() {
  return (
    <div>
      <h1>React Router Dom example</h1>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="/topics" element={<Topics></Topics>}></Route>
        <Route path="/contact" element={<Contact></Contact>}></Route>
      </Routes>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

React version 6부터는 Route태그의 사용방법이 2가지 바꼈다.

• Switch 대신 Routes 사용
• Route 안에 component 대신 element 사용

아래내용부터는 예전 강의와 문법이 달라, 공식문서를 보고 공부한 내용 작성하겠습니다.

---

- Link

 

<Link to="경로">링크</Link>

로 기능을 구현할 수 있다.

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
      <p>
        <Link to="/">Home</Link>
      </p>
      <p>
        <Link to="/topics">Topics</Link>
      </p>
    </BrowserRouter>
  </React.StrictMode>
);

---

- URL Parameter

url에 parameter에 따라 페이지의 내용이 다른 경우를 위해 사용하는 방법.

import {
  BrowserRouter,
  Route,
  Routes,
  Link,
  useParams,
} from "react-router-dom";

const data = {
  cml: {
    name: "이창민",
    description: "리액트 초보",
  },
};

function Profile() {
  const params = useParams();
  const profile = data[params.username];

  return (
    <div>
      <h1>사용자 프로필</h1>
      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>존재하지 않는 프로필입니다.</p>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
	//...
      <Routes>
        <Route exact path="/" element={<Home></Home>}></Route>
        <Route path="/topics" element={<Topics></Topics>}></Route>
        <Route path="/contact" element={<Contact></Contact>}></Route>
        <Route path="profiles/:username" element={<Profile></Profile>}></Route>
      </Routes>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
      <p>
        <Link to="/">Home</Link>
      </p>
      <p>
        <Link to="/topics">Topics</Link>
      </p>
      <p>
        <Link to="/profiles/cml">이창민 프로필</Link>
      </p>
      <p>
        <Link to="/profiles/ccc">ccc</Link>
      </p>
    </BrowserRouter>
  </React.StrictMode>
);

---

- 내용정리 및 후기

route 사용하기 위한 방법부터, a태그가 아니라 Link를 사용하는 방법까지 기본적인 내용에 대해 공부했다.

사실 졸려서 내용정리가 잘 안되고, 진도도 안나가서 다음내용부터는 다시 공부해야겠다.

 

얼른 내일 점심이 됬으면 좋겠다.

밥먹고 싶다.