[React] React-router-dom

패스트캠퍼스 고성능 대규모 프론트엔드 10개 프로젝트: 최적화부터 유지보수까지 한 번에 끝내는 초격차 패키지를 수강하고 정리한 내용입니다.

---

Routing

• 라우팅: 사용자의 요청에 따라 적절한 컴포넌트를 랜더링하는 것
  즉, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

이러한 라우팅을 구현하기 쉽도록 하는 것이 react-router-dom

• React-router-dom: React앱의 라우팅 처리를 위한 라이브러리
• React의 react-router 라이브러리 기반으로 만들어짐
• React-router-dom: React앱의 라우팅 처리를 위한 라이브러리

React Router는 새로운 페이지를 로드하지 않기 때문에 불필요한 렌더링을 막을 수 있음.

• npm 또는 yarn을 통해 간단한 설치가 가능

yarn add react-router-dom

실제 사용

import './App.css';
import {Route, Routes, Navigate, Link } from 'react-router-dom'

function App() {
  return( 
    <>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/posts">Post Link</Link>
      </li>
      <li>
        <Link to="/posts/:id">Post Detail</Link>
      </li>
      <li>
        <Link to="/posts/new">Post New</Link>
      </li>
      <li>
        <Link to="/posts/edit/:id">Post Edit</Link>
      </li>
      <li>
        <Link to="/profile">Post Edit</Link>
      </li>
    </ul>
    <Routes>
     <Route path="/" element={<h1>Home Page</h1>}/>
     <Route path="/posts" element={<h1>Post List Page</h1>}/>
     <Route path="/posts/:id" element={<h1>Post Detail Page</h1>}/>
     <Route path="/posts/new" element={<h1>Post New Page</h1>}/>
     <Route path="/posts/edit/:id" element={<h1>Post Edit Page</h1>}/>
     <Route path="/profile" element={<h1>Profile Page</h1>}/>
     <Route path="*" element={<Navigate replace to="/" />} />
    </Routes>
    </>
  );
}

export default App;