React - Router(리액트 라우터)

1. 리액트에서 URL 값에 따른 View를 보여주는 라우터를 제공.

 

2. React Router Don 사용 방법.

 

npm i react-router-dom

 

3. Link 사용법

Link

<a href="localhost:3000/about">와 같은 태그를 사용할 경우에도 위와 동일한 결과가 나오겠네?

아니, 사용하면 안 된다. Route를 사용하는 이유는 현재 페이지에서 상태를 유지하면서 바뀐 주소에 따라 바뀐 화면만 보이고 싶을 뿐인데, a태그를 사용할 경우, 상태가 전부 날라가버린다. 또 기존의 렌더링된 컴포넌트를 다 날려버리고 처음부터 렌더링이 진행된다.

위에서 썼던 이 부분을 기억하자.

HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해준다.(즉, 페이지 변경으로 인한 깜빡거림이 없다.)

이 부분은 <a>로는 구현이 안 된다. BrowserRouter를 이용한 다른 무언가를 사용해야 한다. 그게 바로 Link다.

Link 컴포넌트는 클릭하면 다른 주소로 이동하는 과정에서 페이지를 새로 불러오지 않고 유지한 상태에서 History API만을 사용하여 페이지의 주소만 변경해준다. Link 컴포넌트는 한마디로 a의 상속버전이라고 봐도 무방한데, 컴포넌트 자체로는 a로 이뤄져 있지만, 추가적으로 페이지 전환을 방지하는 기능이 들어있다.

<Link to='이동할주소'>내용</Link>

사용법은 위와 같다.

 

예제.

index.js

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

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

ReactDOM.render(

  <BrowserRouter>

    <App />

  </BrowserRouter>,

  document.getElementById("root")

);

 

app.js

import logo from "./logo.svg";

import "./App.css";

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

import Home from "./Home";

import About from "./About";

function App() {

  return (

    <div className="App">

      <h1>Welcome to React Router!</h1>

      <p>

        <Link style={{ margin: "30px" }} to="/about">

          About

        </Link>

        <Link to="/">Home</Link>

      </p>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </div>

  );

}

export default App;

 

Home.js

import React from "react";

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

const Home = () => {

  return (

    <>

      <main>

        <h2>Welcome to the homepage!</h2>

        <p>You can do this, I believe in you.</p>

      </main>

      <nav>

        <Link to="/about">About</Link>

      </nav>

    </>

  );

};

export default Home;

About.js

import React from "react";

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

const About = () => {

  return (

    <>

      <main>

        <h2>Who are we?</h2>

        <p>That feels like an existential question, don't you think?</p>

      </main>

      <nav>

        <Link to="/">Home</Link>

      </nav>

    </>

  );

};

export default About;