라우팅이란 ?

라우팅이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것입니다.
React를 이용해서 SPA(single page application)을 개발할 때 가장 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다.

간단한 라우팅 구현

기본적으로 SPA는 index.html 파일에 div 엘리먼트 하나만 남겨두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조를 취합니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한 사용자 경험을 제공할 수 있습니다.

import React, { useState } from "react"
import Home from "./Home"
import About from "./About"
import NotFound from "./NotFound"

function App() {
  const [comp, setComp] = useState(Home)

  return (
    <>
      <header>
        <button onClick={() => setComp(Home)}>Home</button>
        <button onClick={() => setComp(About)}>About</button>
        <button onClick={() => setComp(NotFound)}>Users</button>
      </header>
      <hr />
      <main children={comp} />
    </>
  )

이런 방식으로 라우팅을 하게 되면 문제점이 발생합니다.

• 특정 페이지에 대한 즐겨찾기 등록이 불가합니다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문입니다.

• 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버립니다.

• 새로고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동합니다.

또한 이와 같은 문제점 외에도 SEO(검색엔진 최적화)와 같은 문제가 발생할 수 있습니다.

그래서 어떻게 해야 되는데?

React router를 사용하면 됩니다. react router는 spa의 라우팅 문제를 해결하기 위해서 사용하는 라이브러리입니다. react에서 거의 표준처럼 사용되고 있습니다.

출처: https://www.daleseo.com/react-router-basic/

React Router 설치

npm i react-router-dom

React router 컴포넌트

Link 컴포넌트

html의 a 태그와 유사한 기능을 하는 컴포넌트라고 생각하면 쉽습니다.

<Link to="/main">main</Link>

Route 컴포넌트

<Route exact path="/about" component={about} />

Router 컴포넌트

<Router> 컴포넌트는 위에 나온 <Route>와 <Link> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용합니다.

번외 404페이지 처리

SPA를 개발할 때도 잘못된 URL을 입력하면 특정한 404페이지를 보여줘야합니다. 이럴 경우, 로 모든 컴포넌트로 묶어줘야 합니다.