오늘은 CRA로 리액트 프로젝트를 생성하면 기본적으로 사용하는 React Router DOM을 정리하려고 한다.
우선 React Router DOM을 정리하기 전에 Routing에 대한 설명을 보자.
라우팅은 기본적으로 네트워크에서 경로를 선택하는 과정을 말하는데, 쉽게 설명해서 페이지에 맞게 주소를 맞춰주는 과정이라 생각하면 된다.
React에서는 SPA로 페이지를 이동 시 전체 새로고침을 하지 않는다.
여기서 SPA란 Single Page Application의 약자로 하나의 HTML 페이지에서 모든 콘텐츠를 동적으로 로드하고, 페이지 이동 없이 웹 애플리케이션을 제공하는 방식이다. 이러한 과정에서 사용자가 페이지를 이동할 때 전체 페이지를 새로고침하지 않고, 필요한 데이터만 서버에서 가져와 렌더링 하여 더 빠르고 부드럽게 페이지를 이동한다.
React Router DOM을 사용하면 URL 경로를 관리하면서도 필요한 컴포넌트만 업데이트하여 부드러운 사용자 경험을 제공한다.
Router
1. HashRouter
- URL에 # 포함
- http://localhost:3000/#/exam, http://localhost:3000/#/test 등 # 이후의 부분 /exam, /test 부분은 브라우저가 서버로 전송하지 않으며, 클라이언트 측 라우팅에만 사용된다.
- 클라이언트 측 렌더링
- CSR 전용 라우터, 서버는 해시 이후 URL을 처리하지 않기 때문에 SSR과 맞지 않으며 SEO에 불리하다.
- 간단한 배포
- 해시를 사용하면 서버에 요청하지 않기 때문에 새로고침하거나 url로 직접 접근해도 에러가 발생하지 않는다.
2. BrowserRouter
- HTML5의 history API를 활용
- History API를 사용해 URL을 관리한다.
- 서버 사이드 렌더링 호환
- 기본적으로 CSR에 최적화되어 있지만, 서버 설정을 통해 SSR에서도 사용할 수 있다.
- 까다로운 배포
- 새로고침 하거나 url로 직접 접근할 경우 경로를 찾지 못해 에러가 발생하며, 이를 해결하기 위해 서버에 추가적인 라우팅 설정이 필요하다.
Routes
- 경로 매칭을 한 번만 시도하며, 가장 먼저 매칭되는 경로를 렌더링 한다.
function App = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/project" element={<Project />} />
<Route path="/contact" element={<Contact />} />
</Routes>
);
}Route
-
페이지의 경로와 그의 맞는 컴포넌트를 매핑을 담당한다.
-
element 속성으로 컴포넌트를 렌더링 한다.
-
Route는 Routes 안에서 사용되어야 한다.
오늘은 간단하게 라우팅 관련 컴포넌트 들을 정리해 보았다.
처음 이 내용을 정리하기로 마음먹은 이유는 내 프로젝트를 배포했을 때 BrowserRouter로 배포를 해서 다른 페이지로 가서 새로고침하면 404 에러가 발생하는 경우를 볼 수 있었다.
이러한 오류를 수정하기 위해 하나 둘 찾아보다 보니 공부해야 하는 부분이 계속 늘어나는 것 같다.
