[React] react-router-dom이 뭔데?

1. react-router-dom이란?

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

기존에는 A페이지를 보여준다면 A.html파일을 이용하고 B페이지를 보여준다면 B.html 파일을 보여주는 방식이였지만,

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

이를 SPA(Single Page Application)이라고 부른다.

 

SPA에서 페이지 전환은 HTML 5의 History API를 사용하여 보여준다.

자바스크립트 영역에서 Histroy API를 이용해 현재 페이지 내에서 페이지 이동이 일어난 것 처럼 보인다.

 

History API	내용
History.back()	세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드
History.forward()	세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드
History.go()	특정한 세션 기록으로 이동하는 비동기 메서드, 1을 넣어 호출하면 바로 앞 페이지, -1을 넣어주면 바로 뒤 페이지로 이동
History.pushState()	주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 자바스크립트 객체로 저장하는 것이 가능
History.replaceState()	최근 세션 기록 스택의 내용을 주어진 데이터로 교체

---

2. Routing이란?

해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것이다.

 

2.1 React Router = CSR(Client Side Routing)

서버에 URL로 새로운 페이지를 요청하는 것이 아니라,

페이지는 유지하되, Application에서 업데이트가 필요한 부분만, 경로에 해당하는 컴포넌트만 부분적으로 업데이트하고,

부분적으로 네트워크 통신(fetch)하여 json형태 data를 받아온다.

---

3. react-router-dom 설치

터미널에 "npm install react-router-dom"을 입력하여 설치한다.

---

 

4. App.js에 import 및 BrowserRouter로 감싸기

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

• BrowserRouter : HTML5의 histroy  API를 사용하여 라우팅을 관리
• Route : 특정 경로(path)에 대한 컴포넌트를 매핑
• Routes : Route에 매치되는 첫번째 요소를 렌더링
• Link : a 태그와 비슷하며 to 속성에 설정된 링크로 이동, 기록이 history 객체에 저장된다.

 

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />} />
          <Route path="/day/:id" element={<Day />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

---