[React] React Router

민태홍·2022년 3월 6일

React

목록 보기

2/5

SPA란 ?

Single Page Application의 줄임말으로 하나의 페이지로 이루어진 어플리케이션을 말한다.

기존에는 사용자가 페이지를 이동하게 되면 새로운 html 파일을 받아와 보여주었다.

리액트와 같은 라이브러리나 프레임워크를 사용하게 되면 사용자의 브라우저에서 view를 렌더링 하게 되고 인터렉션이 일어나게 되면 필요한 부분만을 받아와서 다시 리렌더링을 진행한다.

SPA는 말 그대로 하나의 페이지로 이루어진 어플리케이션 이지만, 로딩된 자바스크립트와 url에 따라 다른 view를 보여준다. 이렇게 url에 따라 다른 view를 보여주는 것을 Routing이라고 한다.

라우팅이란 ?

위에서 말했듯이 URL에 따라 그에 해당하는 view를 보여주는 것이다. 리액트에서는 라우팅 처리를 위해 react router를 가장 많이 사용한다.

React Router

React Router를 사용하면 앱에서 발생하는 라우팅이 location과 history 같은 wep API 와 연동된다.

React Router 설치

npm install react-router-dom --save

React Router 사용

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

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <Router>
        <React.Suspense fallback={<div>Loading...</div>}>
          <App />
        </React.Suspense>
      </Router>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

위와 같이 밖에 Router 태그로 감싸주어야 한다.

<Switch>
  	// path에 해당하는 url이 오면 해당하는 component를 보여주겠다.
	<Route path="/main" component={MainPage} />
    <Route path="/sub" component={Page} />
    <Route path="/ChatRoom" component={ChatRoom} />
    <Route path="/Project" component={Project} />
    <Redirect path="*" to="/main" />
</Switch>

위와 같이 Switch 태그로 감싸주고 Route태그 안에서 위와 같이 사용하면 된다.

import { Link } from "react-router-dom";

export default function example() {
  return (
	<Link to="/main">메인으로 가기</Link>
  );
}

와 같이 Link 태그를 사용하게 되면 이후 a태그로 변환되어 url이 변경되며 main에 해당하는 컴포넌트가 보여진다.

결국 a태그로 변환되지만 Link태그를 사용하는 이유?

효율을 위해서 사용한다고 한다. a태그로 하게 되면 서버에 문서를 요청하게 된다. 그런데 Link를 이용하면 화면의 특정부분만 바꿔주면 되는 경우에 효율적인 화면 전환을 할 수 있다. 단순히 경로만 바꿔 불필요한 렌더링을 피한다. 완전히 외부사이트로 가야할때는 당연히 a태그를 사용해야한다.