React router 이용하기 !

라우터(router)란?

리액트는 SPA (Single Page Application)으로 이루어져 있는데, 

기존 웹 라우팅 방식으로는 새로운 페이지를 로드하는 방식이었는데 리액트에서는 하나의 페이지 안에서 필요한 데이터만 불러오는 방식으로 이루어져 있다.

설치

npm install react-router-dom
yarn add react-router-dom

예시

App.js

import {Route , Routes} from 'react-router-dom'

import SignUp from './pages/SignUp'
import Home from './pages/Home'

function App() {
  return (
    <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/SignUp" element={<SignUp />} />
          
    </Routes>
  );
}

export default App;

우선 App.js 파일을 이렇게 구성해 줬다.

 

Routes

여기서 <Routes>는 <Route>를 감싸주는 컴포넌트이다. 감싸주지 않으면 라우터가 작동하지 않는다.

 

Route

Route 안에 path와 element가 있는데 path를 어디 어디로 가야 element를 보여줄 거다. 이런 느낌으로 이해하면 된다.

 

1. path

주소창을 적어준다. 예를 들어 local환경에서 "/SignUp"이라 적는다면 'http://localhost:3000/SignUp'에 SignUp이라는 컴포넌트가 보일 것이다.

 

2. element

path에 도달했을 때 보여줄 컴포넌트를 가리킨다.

 

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';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <App />
      </BrowserRouter>,
  document.getElementById('root')

);

// 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();

index.js에서 <BrowserRouter>로 <App />를 감싸줘야 라우터(router)가 정상적으로 작동한다.

 

basename을 지정해주었는데 이건 나중에 깃허브에 배포할 때 주소창이 로컬과 달라질 때 사용한 거라 나중에 글을 작성하겠다.