[React] React Router

1. React Router 개념

2. React Router 사용방법

---

1. React Router 개념

우리가 흔히 말하는 '페이지 이동'이라는 기능을 React에서는 React Router를 통해 처리할 수 있다. 

라우팅을 간단하게 설명하면, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다.

React에서는 Routing 관련 라이브러리가 많이 있는데, 그 중 가장 많이 쓰이는 것은 React Router이다.

 

React는 SPA(Single Page Application) 방식이다. 기존의 웹 페이지(MPA 방식)처럼 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. 새로운 페이지를 로드하지 않고, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

 

React Router는 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리라고 볼 수 있다.

 

 

2. React Router 사용방법

먼저, 아래 명령어로 패키지를 설치한다.

$ npm i react-router-dom

 

패키지 설치가 완료되었다면 App.js에 다음과 같이 코드를 작성한다.

import {BrowserRouter as Router, Link, Routes, Route} from 'react-router-dom';
import Index from './pages/index/index.jsx';
import Counter from './pages/counter/index.jsx';
import Comment from './pages/comment/index.jsx';
import Login from './pages/login/index.jsx';
import Header from './components/common/header.jsx';

function App() {
  return (
    <>
      <Router>
        <Header/>
        <Routes>
          <Route path='/' index element={<Index/>}/>
          <Route path='/counter' element={<Counter/>}/>
          <Route path='/comment' element={<Comment/>}/>
          <Route path='/login' element={<Login/>}/>
        </Routes>
      </Router>
    </>
  );
}

export default App;

 

import한 Index, Counter, Comment, Login 컴포넌트들은 아래와 같이 간략하게 작성한다.

// index/index.jsx
const Index = () => {
    return(
        <>Index Page</>
    );
};

export default Index;

첫 줄에서 BrowserRouter라는 컴포넌트를 Router라는 이름으로 import해주었다.

<Router> 컴포넌트 안에 <Routes>를 적어주고, 그 안에 <Route> 컴포넌트를 쓰면 된다.

<Route> 컴포넌트의 path는 HTML에서 a태그의 href와 같은 역할을 한다.

 

웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용한다. 하지만, a태그는 클릭 시 페이지를 새로 불러오기 때문에 React에서는 Link 컴포넌트를 대신 사용한다. 생김새는 a태그와 비슷하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다. <Link to='경로'>링크명</Link> 형태로 사용하며, import { Link } from 'react-router-dom';을 추가해주면 된다.

 

<Routes> 컴포넌트 안에 여러 개의 <Route> 컴포넌트가 있을 때, 그 중 하나에 'index'를 추가하면 그 컴포넌트가 기준이 된다. 즉, App 컴포넌트가 화면에 렌더했을 때 index가 있는 컴포넌트가 나타난다.