[React] 리액트 라우터

📄 라우팅이란?

라우팅은 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업입니다.

싱글 페이지 어플리케이션(SPA)에서 클라이언트가 라우팅을 담당합니다.

📄 SPA란?

SPA는 html을 한번만 받아와서 실행시킨 후 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 페이지입니다.

실질적으로는 하나의 페이지에서 작업하지만 사용자는 여러개의 페이지를 불러오는 것처럼 느낍니다.

▪ SPA 단점

  1. 앱의 규모가 너무 커지면 JS파일의 크기가 너무 커질 수 있습니다.
  2. 브라우저에서 자바스크립트가 구동 되지 않으면 UI를 볼 수 없습니다. 예) 검색엔진에서 크롤링 불가능

📄 리액트에서 사용되는 라우터 라이브러리

  1. 리액트 라우터 리액트 라우터는 컴포넌트를 기반으로 라우팅합니다.
  2. 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