220322 리액트 Router

라우터(Router)

• 리액트는 SPA (Single Page Application) 방식으로, 새로운 페이지를 로드하지 않고 하나의 페이지 않에서 필요한 데이터만 가져온다
  • MPA (Multi Page Application) 는 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식이다
• 예를 들면

• MPA 방식은 페이지별로 html이 따로 나뉘어져 있고,
  사용자가 회원가입 버튼을 누르면, 새로운 회원가입 html로 이동하는 방식

• SPA 방식은
• 하나의 html 페이지 안에서
• 사용자가 회원가입 버튼을 누르면
• 회원가입에 대한 js 파일이 렌더링 되는 방식

• 리액트가 사용하는 SPA 방식에서는 하나의 페이지만 갖고 있기 때문에, MPA 방식의 페이지 이동이 어렵다

• React Router는 이를 해결하기 위한 네비게이션 라이브러리
• React Router를 사용하면 앱에서 발생하는 라우팅이 location과 history와 같은 wep API와 연동된다

React Router Dom 사용 방법

1. 설치하기

yarn add react-router-dom

• react-router : 웹 & 앱
• react-router-dom : 웹
• react-router-native : 앱

2. 라우터 컴포넌트

• 설치가 완료되면 App.js에서 import 구문을 추가해준다

import { Router } from "react-router-dom";

• 라우터에는 다양한 컴포넌트들이 있다

  • Router
    • 현재 URL 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용하는 컴포넌트
      ⭐ props (path: 매치시킬 경로, component: 보여줄 컴포넌트)

      <Router path='/' component={} />

  • LinK
    • HTML의 a 태그와 동일한 역할을 하는 컴포넌트
      ⭐ props ( to : 이동할 경로 지정)

      <Link to="/">Home</Link>

  • Router
    • Route, Link 컴포넌트가 함께 동작할 수 있도록 연결시켜주는 컴포넌트로, 항상 Router를 공통 상위 컴포넌트로 가져야한다.
    • Router의 종류에는 BrowserRouter, HashRouter, withRouter 등이 존재
      - HashRouter : 백엔드가 필요하지 않은 상황에 주로 사용, 백엔드가 필요하지 않은 상황에 주로 사용
      - BrowserRouter : HTML5의 history API를 활용한 라우터, 주로 사용하는 라우터
      - Switch : 모든 Router 컴포넌트들을 반복하며, 현재 URL과 path가 일치하는 첫번째 요소만 렌더링 하여 라우터 충돌을 막도록 하는 컴포넌트

      <Router>
      	...
      	<Route />
      	<Route />
      	...
      <Router />

🔎 더 알아보기

history

• 리액트에서 Router 컴포넌트는 props로 hitory 객체를 주고 받으며 페이지의 기록을 공유
• history 객체를 콘솔로 확인해보면 다양한 메소드와 관련 객체가 존재
• 가장 자주 사용하는 메소드는 push( )로,
  이는 history.push ('이동하고자 하는 경로')를 통해 원하는 컴포넌트로 이동이 가능