[React] react-router-dom (1) 설치 및 구성

✔️ 개요

리액트는 SPA(single page application) 즉, 페이지가 한개인 어플리케이션 방식의 라이브러리로 프로젝트에 html의 파일이 1개이다.
그래서 페이지 전환 기능을 구현하기 위해서는 외부 라이브러리에 의존해야 하는데 이때 사용하는 방법이 Routing이다.
Routing이란, 한 개의 웹페이지 내에서 여러 개의 페이지를 보여주는 방법을 뜻한다.
이번 포스팅에서는 SPA를 다루기 위한 라우팅에 대해서 알아보려고 한다.

✔️ 설치

CRA로 프로젝트를 생성하고 명령어를 사용해서 react-router를 설치해준다.

npx create-react-app router_example

npm install react-router-dom

✔️ router 구성하기

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

function App() {
  return (
    <BrowserRouter>
    	<Routes>
    		<Route path="/" element={<MainPage />} />
				<Route path="/tech" element={<TechPage />} />
                <Route path="/blog" element={<BlogPage />} />
    	</Routes>
    </BrowserRouter>
  );  
}

export default App;

1️⃣ 먼저, import로 react-router-dom에서 BrowserRouter, Routes, Route를 가지고 온 후, 메인 js 파일 아래에 태그를 추가한다.

2️⃣ BrowserRouter > Routes > Route 순으로 컴포넌트를 감싸준다.

• BrowserRouter란, web browser에서 react-router를 실행시키기 위해 필요한 인터페이스이다.
• Routes는 여러 Route를 감싸고 있는 컴포넌트이고,
• Route는 path 속성에 이동할 경로를, element 속성에는 컴포넌트를 입력해 주어야 한다.
  이 때 주의할 점은 element={MainPage}가 아닌 element={}로 작성해줘야 한다는 점이다.

위의 코드를 작성한 결과 화면이다.

기본 root로 들어왔을 경우에는 -> Main 페이지
tech로 들어왔을 경우에는 -> Tech 페이지
blog로 들어왔을 경우에는 -> Blog 페이지가 보여지면서 url이 변경되는 것을 볼 수 있다.