[React] 리액트 라우터
📄 라우팅이란?
라우팅은 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업입니다.
싱글 페이지 어플리케이션(SPA)에서 클라이언트가 라우팅을 담당합니다.
📄 SPA란?
SPA는 html을 한번만 받아와서 실행시킨 후 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 페이지입니다.
실질적으로는 하나의 페이지에서 작업하지만 사용자는 여러개의 페이지를 불러오는 것처럼 느낍니다.
▪ SPA 단점
- 앱의 규모가 너무 커지면 JS파일의 크기가 너무 커질 수 있습니다.
- 브라우저에서 자바스크립트가 구동 되지 않으면 UI를 볼 수 없습니다. 예) 검색엔진에서 크롤링 불가능
📄 리액트에서 사용되는 라우터 라이브러리
- 리액트 라우터 리액트 라우터는 컴포넌트를 기반으로 라우팅합니다.
- Next.js 서버사이드 렌더링을 쉽게 구현 가능합니다. 파일 경로, 이름을 기반으로 라우팅합니다.
📄 리액트 라우터
▪ 설치 방법
npm install react-router-dom // npm
yarn add react-router-dom // yarn
▪ BrowserRouter
<BrowserRouter>
basename: string
getUserConfrimation: func
forceRefresh: bool
keyLength: number
children: node
- HTML5를 지원하는 브러우저의 주소를 감지합니다.
- 주소만 바꾸고 페이지는 다시 불러오지 않습니다.
HashRouter
<HashRouter>
basename: string
getUserConfirmation: func
hashType: string
children: node
- #를 사용합니다.
- 옛날 브라우저 전용입니다.
- example.com/#/path/to/route
▪ MemoryRouter
<MemoryRouter>
initialEntries: array
initialIndex: number
getUserConfirmation: func
keyLength: number
children: node
- 브라우저의 주소와 무관합니다. 따라서 브라우저가 아닌 환경에서 쓰기 좋습니다.
- 임베디드 웹앱, 리액트 네이티브 등에서 사용합니다.
▪ StaticRouter
<StaticRouter>
basename: string;
location: string;
location: string;
context: object
children: node
- 서버사이드 렌더링에서 사용하는 용도입니다.
▪ Route
<Route>
Route render methods
Route props
component
render: func
...
- 라우트를 정의할 때 사용하는 컴포넌트입니다.
▪ Link
<Link>
to: string
to: object
replace: bool
innerRef: function
others
- 사용한
Router
의 주소를 바꿉니다. - a 태그지만 새로고침되지 않습니다.
📄 리액트 라우터의 파라미터와 쿼리
라우너의 파라미터와 쿼리는 주소를 통해서 어떤 동적인 값을 읽어와야 할 때 사용합니다.
▪ URL 파라미터
- /profiles/velopert
- 정해진 특정 데이터를 조회할 때 사용합니다. ex) 아이디
▪ Query
- /filter?type=book&sort_by=date
- 다양한 옵션을 줘서 조회할 때 사용한다. ex) 검색
출처
- 패스트캠퍼스 for velopert
Leave a comment