[React] 기초 #3 (Router)

💡Router

SPA & Routing

---

• SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않으며,
  Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지
  등의 화면이 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라진다.
• 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로
  라우팅(Routing) 이라고 한다.
• React 자체에는 라우팅 기능이 내장되어 있지 않기 때문에, 직접 주소마다 다른 뷰가
  보이게 끔 설정해야한다.
• React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.

React Router 활용

---

React Router 주요 컴포넌트

1. Router : BrowserRouter
   • 라우터 역할
2. Router matchers : Switch, Route
   • 경로를 매칭해주는 역할
3. Router changers : Link
   • 경로를 변경하는 역할

• 위 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야한다.

React Router 사용 환경 세팅

1. react-router 라이브러리 설치

// simpleroute 폴더에 React App 설치
$ npx create-react-app simpleroute
$ cd simpleroute

// react-router 라이브러리 설치
$ npm install react-router-dom

2. App.js 로 react-router 컴포넌트 꺼내오기

import React from "react";
import { BrowserRouter, switch, Route, Link } from "react-router-dom";

exprot default function App() {
  return ( ... )
}