개발야옹

이전 글

1. 2022.02.09 - [React] - [ React ] React Router

react-router-dom :: <Link> component

react-rotuer-dom library의 <Link> component는 html의 <a> tag와 같이 연결된 주소로 페이지를 전환시켜준다.

<a> tag의 경우 페이지를 전환하는 과정에서 새로운 페이지를 불러오면서 애플리케이션이 가지고 있던 모든 상태를 날려버려 렌더링되어있던 모든 컴포넌트들도 모두 사라지고 페이지를 모두 처음부터 다시 렌더링하게 된다.

그렇기 때문에 react-rotuer-dom library를 사용하여 라우팅 하는 경우에는 <a>태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있는 <Link> component 를 사용하여 페이지 전환을 해야한다. 

<Link> component를 사용하여 페이지를 전환하면 페이지를 새로 불러오지 않고 애플리케이션은 유지를 한 상태에서 HTML 5 History API를 사용하여 페이지의 주소만 변경해준다. 

<Link> Component 사용방법

<Link to="주소">내용</Link>

 App.js

// src/App.js

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> 라우팅 프로젝트 </h1>

        <ul>
            <li>
                <h2><Link to="/">Home</Link></h2>
            </li>

            <li>
                <h2><Link to="/about">About</Link></h2>
            </li>
        </ul>
        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

실행화면

React Router 사용법

1.  프로젝트 생성 및 라이브러리 설치

npx create-react-app react-rotuer-tutorial // cra react project 생성
cd react-router-tutorial // 생성한 project dir로 이동
npm install react-router-dom // react-router-dom 라이브러리 설치

2.  프로젝트에 라우터 적용

// src/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')
);

reportWebVitals();

3.  라우팅할 페이지 만들기

// src/Home.js

const Home = () => {
    return(
        <div>
            <h1>I'm home!</h1>
        </div>
    )
}

export default Home;

// src/About.js

const About = () => {
    return(
        <div>
            <h1>I'm About!</h1>
        </div>
    )
}

export default About;

4.  Routes, Rotue 컴포넌트로 특정 주소에 컴포넌트 연결

// src/App.js

import logo from './logo.svg';
import './App.css';
import {Route, Routes} from "react-router-dom";
import Home from "./Home";
import About from "./About";


function App() {
  return (
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

5.  라우팅 잘 되는지 확인하기

npm start

localhost:3000

localhost:3000/about

react-router-dom v6 부터 문법이 조금 바뀌었다. 위에서 설명한 문법은 v6 문법이다.