동적라우팅 어떻게 하면 될까?

jonmad·2020년 10월 4일
2

라우팅이란 ?

라우팅이란 다른 경로(주소)에 따라 다른 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 컴포넌트

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

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

Route 컴포넌트

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

Router 컴포넌트

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

번외 404페이지 처리

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

profile
나랑 같이 개발할 사람🖐

0개의 댓글