[React] 리액트 라우팅

리액트 라우터

존재 이유

• SSR: 서버사이드 렌더링 => 브라우저의 네비게이션, 방문 기록이 일반적인 예상과 같이 동작함

• CSR: 클라이언트사이드 렌더링 => 단일 페이지, JS파일을 로드하여 HTML을 갱신함

• CSR에서 SSR처럼 동작하게 하려면 라우팅 솔루션이 필요하다.

  • 앵귤러, 엠버, 백본에는 표준 라우터가 있는데, 리액트는 없다.
  • 그래서 리액트 라우터를 만든 것
  • 리엑트 라우터에서는 필요한 컨텐츠를 가져오기 위해 endpoint를 이용한다.

주목할 만한 키워드

Outlet 컴포넌트

• 사용예시

import { Routes, Route, Outlet } from 'react-router-dom';

function Alphabet() {
  return (
    <div>
      <p>Alphabet</p>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<p>home</p>} />
        <Route path='alphabet' element={<Alphabet />}>
          <Route path='a' element={<p>a</p>} />
          <Route path='b' element={<p>b</p>} />
          <Route path='c' element={<p>c</p>} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Redirect 컴포넌트

• 사용처
  • 사용자의 잘못된 접근을 바로잡을 때
    • /services(about을 빼먹음) => about/services(올바른 주소)
  • 페이지네이션 변경시 예전 버전의 주소로 접근한 유저를 갱신된 주소로 돌려줄 때
    • about/service(이전 버전의 주소) => about/services(최신 주소)
• from, to 속성을 이용

error 처리하기(wildcard)

• Route가 적용된 모든 path를 제외하고 나머지 페이지에 접근 했을때 default 에러 페이지를 띄우는 용도로 활용할 수 있음
• <Route path="*" element{<DefaultErrorPage />} />