- BrowserRouter
- Route
- Switch
- Link
SPA
Single Page Application 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했죠.
싱글페이지라고 해서, 한 종류의 화면만 있냐구요? 그건 아닙니다. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있겠지요. 또한 이 화면에 따라 주소도 만들어줘야 합니다. 주소가 있어야, 유저들이 북마크도 할 수 있고 서비스에 구글을 통해 유입될 수 있기 때문이죠. 다른 주소에 따라 다른 뷰를 보여주는것을 라우팅 이라고 하는데요, 리액트 자체에는 이 기능이 내장되어있지 않습니다. 따라서 우리가 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 합니다.
만약에 여러분이 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면, react-router 는 필수 라이브러리입니다.
BrowserRouter
- 'BrowserRouter'는 React Router의 핵심 컴포넌트 중 하나로, 브라우저의 HTML5 History API를 사용하여 클타이언트 측 라우팅을 관리합니다.
- BrowserRouter를 사용하면 사용자가 애플리케이션 내에서 이동할 때마다 페이지가 새로고침되지 않고도 새로운 컴포넌트가 렌더링됩니다. 이는 SPA(Single Page Application)의 핵심 개념 중 하나이며, 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
- 주로 최상위 컴포넌트로 사용되며, 라우터의 컨텍스트를 제공합니다. 즉, 내부에 포함된 모든 라우팅 관련 컴포넌트들이 라우터의 정보에 액세스할 수 있습니다.
npm install react-router-dom패키지 설치
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
BrowserRouter 래핑...
BrowserRouter 컴포넌트를 사용하여 애플리케이션의 최상위 컴포넌트를 래핑합니다. 일반적으로 index.js나 App.js와 같은 파일에서 수행됩니다.
Route
- 'Route'는 특정 URL 경로와 연결된 컴포넌트를 렌더링하는 데 사용됩니다.
- 주어진 경로에 대한 URL이 브라우저의 현재 URL과 일치하면 해당 컴포넌트가 렌더링 됩니다.
- 'Route'의 'path' prop은 해당 경로와 일치하는 URL을 지정하고, 'component' prop은 렌더링할 컴포넌트를 지정합니다.
- 또는 'render' prop을 사용하여 렌더링할 함수를 직접 지정할 수도 있습니다.
Switch
- 'Switch'는 여러 개의 'Route'를 포함하고, 그 중 첫 번째로 일치하는 'Route'만을 렌더링합니다.
- 여러 개의 경로 중 하나만 렌더링하고자 할 때 유용합니다.
- 일반적으로 'Switch'는 루트 라우팅 컴포넌트에서 사용되며, 경로의 순서에 따라 우선순위가 결정 됩니다.
Link
- 'Link'는 클라이언트 측에서 내비게이션을 구현하기 위해 사용되는 컴포넌트입니다.
- HTML
<a>태그와 유사하지만, 페이지 전환 시에 페이지를 새로고침하지 않고 React Router의 라우팅을 처리합니다. - 'to' prop을 사용하여 이동할 경로를 지정합니다. 클릭하면 해당 경로로 이동합니다.
이러한 컴포넌트들을 조합하여 React 기반의 SPA를 구축할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 페이지 간의 부드러운 이동을 제공할 수 있습니다.
