[React] React Router

🧐 What is React Router ?

Twitter 와 같은 SPA를 만들때 여러개의 페이지를 구현하는 화면이 필요할 수 있다. 주소에 따라 다른 뷰를 보여주는 기능을 라우팅(Routing)라고하는데 React자체에는 이 기능이 내장되어 있지 않다. 그래서 React SPA 에서는 라우팅을 위해 React Router 라는 라이브러리를 사용해서 이 기능을 구현한다.

1.React Router Components

• BrowserRouter
  - BrowserRouter 컴포넌트는 페이지를 새로고침하지 않고도 주소를 변경하게 해준다. 또한 BrowserRouter 컴포넌트가 최상위에 작성 되어야 한다.
• Routes
  - Routes 컴포넌트는 Route 컴포넌트를 감싸서 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할을 한다.
• Route
  - Route 컴포넌트는 path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.
• Link
  - Link 컴포넌트는 페이지를 새로고침하여 불러오지않고 API를 이용해 페이지의 주소만 변경해준다. Link 와 <a>태그가 비슷하지만 다르다 <a>는 페이지를 불러오는 과정에서 처음부터 렌더링을 시킨다, 즉 새로고침 현상이 발생한다. 하지만 Link는 새로고침을 하지 않는다.

2.React Router 설치,세팅

🤩 설치

$ npm install react-router-dom

🤩 세팅
import 문으로 세팅을 해주어야 React Router 의 컴포넌트들을 사용할 수 있다.

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

-- 미완성 컴포넌트 사용 예시 적을것.