React : 리액트 라우터(Router) 설치 및 컴포넌트 구현하기

Router를 사용하기 전에 우리는 SPA가 무엇인지 알고 넘어가야 한다.

1. SPA 

---

SPA(Single Page Application) : 페이지가 하나인 애플리케이션 

 

HTML로 프로젝트를 할 때는 html 파일이 페이지 수만큼 존재했지만 리액트 프로젝트에서는

html은 한 개만 존재한다. 그럼 페이지가 여러 개 일 때는 어떻게 해야 하는가??

한 개의 웹안에서 여러 개의 페이지를 보여주는 방법이 바로 Routing을 사용하는 것이다.

 

 

2. Routing

---

라우팅 이란 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다,

 

리액트 자체에는 이러한 기능이 내장되어있지 않다.

그렇기 때문에 리액트가 Framework가 아닌 Library로 분류되는 것이다.

React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다.

 

 

 

3. React Router

---

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에 routing solution인 react-router를 추가해서

라우팅을 구현해야 한다.

 

3-1 react-router 설치

npm install react-router-dom --save

* --sava를 작성하는 이유는 dependencies의 추가가 안될 경우를 위해 보험용으로 작성해준다.

* 보통은 자동으로 추가가 되지만 몇몇 개는 자동으로 추가가 안될 수도 있기 때문이다.

 

3-2. Router 컴포넌트 구현하기

// src/Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom"

import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Login />} />
                <Route path="/main" element={<Main />} />
            </Routes>
        </BrowserRouter>
    )
}

export default Router;

 

3-3 index.js 컴포넌트 변경하기

화면에는 <App /> 컴포넌트가 보이고 있으니 routing을 설정한 컴포넌트로 변경해준다

<App /> ➡️ <Router />

➡️

 

 

✅ 정리

• 리액트는 SPA 이다 (Single Page Application)
• 하나의 페이지에 여러페이지를 보여주고싶으면 Routing을 사용해야한다.
• Routing을 사용하려면 따로 추가를 해주어야한다 (react-router 설치)
• 이동할 페이지는 import 하고 Route를 이용해 불러주면된다.
• <Route path="/URL주소" element={<import한 변수 />} />
• ex) <Route path="/main" element={<Main />} />
• ⬇️ localhost:3000 뒤에 path에 적어준 /main 을 붙여주면 컴포넌트를 바꿀수 있다.