[React JS] React Router DOM

1. React Router DOM

: 리액트를 사용하여 페이지를 이동할 때 필요한 라이브러리

: 리액트에서는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

=> SPA(Single Page Application)

 

# SPA에서 화면 변경이 일어나는 방식 #

: HTML5의 History API를 사용해서 가능하게 한다. JS 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 한다.

• History.back() - 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과
• History.forward() - 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과
• History.go() - 특정한 세션 기록으로 이동하게 해주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동.
• History.pushState() - 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JS 객체를 저장하는 것이 가능.
• History.replaceState() - 최근 세션 기록 스택의 내용을 주어진 데이터로 교체

 

 

• BrowserRouter : History API를 사용해 URL과 UI를 동기화하는 라우터
• Routes : Route에 매치되는 첫번째 요소를 랜더링
• Route :  컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트를 랜더링
• Link : a 태그와 비슷. to 속성에 설정된 링크로 이동한다. 기록이 history 객체에 저장.

 

2. React Router DOM 사용하기

1) React Router DOM 설치

npm install react-router-dom --save

--save를 해줘야 package.json에 react-router-dom을 업데이트 할 수 있다.

 

2) 설치 완료 후 어플리케이션에 소스 코드 작성

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {BrowserRouter } from "react-router-dom";

ReactDOM.render(
	<React.StrictMode>
    	<BrowserRouter>
        	<App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
);

자동으로 react-router-dom에서 browser 함수를 가져온다.

 

App.js

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

import LandingPage from "./경로";
import LoginPage from "./경로";
import RegisterPage from "./경로";

function App(){
return(
	<Routes>
    	<Route path = "/" element = {<LandingPage />} />
        <Route path = "/login" element = {<LoginPage />} />
        <Route path = "/register" element = {<RegisterPage />} />
    </Routes>
    );
}

export default App;