React-router-dom

React (js, css)

React-router-dom

younaeun 2022. 6. 3. 08:28

오늘은 react-router-dom의 대표적인 문법인 browserRouter, Route, Link에 대해 설명해보겠다.

우선 react-router-dom이란? 리액트에서 Spa 구현할 때 가장 많이 쓰는 라우터이다.

*spa(single page application) - 전체 화면 로드 x (로딩 시간 지연) 일부만 변경 o

그리고 여기서 가장 헷갈리는 개념이 라우터였는데 지민이가 설명해줬다.

위는 github.com의 페이지이다. 여기서 옆의 yunaeun/yunaeun의 버튼을 누르면

주소가 바뀌며 이동하게 된다. 아아주 옛날옛적엔 페이지를 통채로 옮기는 방식을 사용했고, 그 후엔 백엔드를 통해 페이지를 넘겨줬다고 한다. 그리고 현재, 라우터가 손쉽게 다른 페이지를 볼 수 있게 해준다.

-> (한줄요약) 라우팅 : 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다.

프로젝트를 생성 후

$ npm install react-router-dom <- 해당 명령어를 입력해주면 라우터가 설치된다

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

function App() {
  return (
    <div className="react-router-dom">
      <h1>react-router-dom</h1>
    </div>
  );
}

export default App;

이런식으로 import 해주면 사용할 수 있다.

1. <BrowserRouter>

BrowserRouter는 HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 <Router>라고 되어있다.

그치만... 무슨 말인지 모르겠다. 조금 더 쉽게 이해해보자면 새로고침을 하지않고도 주소를 변경할 수 있도록 도와주는 라우터인 것 같다. 또한, BrowserRouter는 최상위 컴포넌트를 감싸주는 래퍼 컴포넌트이다. <- 이 부분을 몰라서 코드 이해가 안 되었음!!

↔️ HashRouter 정적인 페이지에 적합하다고 함 URL에 #이 추가된다.

· 프로모션서버에 따라 무엇을 쓸지 결정

· 보편적으로는 BrowserRouter가 많이 쓰인다

2. <Route>

route는 사용자의 주소규칙에 따라 우리가 보여줄 컴포넌트를 지정할 수 있다. <Route />는 <Routes> </Routes>로 묶어줄 수 있다.

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

3. <Link>

Link는 a태그와 마찬가지로 클릭하면 다른 페이지로 넘겨주는 역할을 한다. 여기서 a태그와의 차이점은 a태그는 브라우저에서 새 페이지를 불러주는 반면, Link는 History API를 통해 브라우저 주소의 경로만 바꿔준다. (페이지를 새로 불러오는 걸 막음)

<Link to="경로">링크 이름</Link>

다음은 react-router-dom을 사용하여 구현한 코드이다.

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Start from "./start.js";
import About from "./about.js";
import Contact from "./contact.js";

function App() {
  return (
    <div className="react-router-dom">
    	<BrowserRouter>
      		<nav>
      			<Link to="/">Home</Link>
      			<Link to="about">About</Link>
      			<Link to="Contact">Contact</Link>
      		</nav>
      
      		<Routes>
      			<Route path="/" element={<Start />} />
        		<Route path="about" element={<About />} />
        		<Route path="contact" element={<Contact />} />
      		</Routes>
        </BrowserRouter>
    </div>
  );
}

export default App;

다음과 같이 최상단에는 BrowserRouter로 감싸주고 있고, Route를 통해 각각의 컴포넌트를 주소와 매칭해준다. 그리고 Link에서 이동할 주소를 입력하면 버튼 클릭시 해당 주소로 이동하게 된다.

🔼각 Home, About, Contact를 클릭하면 해당 컴포넌트가 보여진다.