기본적으로 리액트는 DOM을 조작해주고, 라우팅에는 신경쓰지 않는다.

그리하여 라이브러리 등을 이용하여 라우팅을 이용해야 하는데,

이 라이브러리들은 브라우저에서 제공하는 API들을 이용하여 URL을 mimic(따라하고), 중간에 이벤트를 인터셉트 하여 라이브러리 자신이 라우팅을 하도록 유도한다

그리여 SPA에서도 마치 인터넷 네트워크 상의 URL을 쓰는 것 처럼, 뒤로가기, 앞으로가기, 특정 URL을 입력하면 그리로 이동하기 등등을 할 수 있도록 이 React-Router라는 것이 할 수 있다.

그 중 가장 대표적인 라이브러리가 react-router-dom

모든 것에 앞서 모듈 설치 해주고,

npm install --save react-router-dom

// react-create-app으로 만든 app의 index.js 파일 내용 입니다.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom"
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter >          // 이렇게 BrowserRouter로 App을 감싼다.
    <App />
    </BrowserRouter >
  </React.StrictMode>,
  document.getElementById("root")
);

이렇게 BrowserRouter를 임포트하고, App을 감싼다.

여기서 주의사항

<BrowserRouter></BrowserRouter> 열고닫을 때 "/" 슬래시의 위치 주의 하기.

1. <Route path ='/' component={Signin} /> 방식

**<Route path ='/' component={Signin} />
<Route path ='/signin' component={SignIn} />
<Route path ='/signup' component={SignUp} />**

이 방식의 문제점, '/' url 즉, 홈 url로 접근하려고 하면, path가 '/' 즉 " 슬래시"로 시작하는 모든 Route까지 렌더 해 버린다. 나는 '/'얘 주소 것만 렌더하고 싶은데 '/'로 시작하는 '/signin', '/signup'을 다 렌더해 버림.