React-Router-Dom 기초중의 기초 정리하기 !

리액트를 공부하다보니 리액트 라우터에 대한 공부가 꼭 필요 할 것 같아서 정리 하고자한다.

 

Routing이란

라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스이다.

출처 : https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85

 

다양한 주소 요청이 들어왔을 때 각각 맞는 곳으로 이동시켜주는 작업이라고 보면된다.

 

React에서 React-Router를 사용하는 이유

마크업할때 a태그로 경로를 정해서 작업하는 방법도 있는데 왜 굳이?

SPA(Single Page Application)사용자 경험향상의 목적으로 사용한다고 한다.

a태그로 해서 클릭해 들어가면 깜빡이면서 새롭게 로딩이 발생하는데 이게 싫어서

라우팅을 통해 한페이지 안에서 해결하려고 하는것!!!

 

 

라우터 종류

1. Hash Router

2. Browser Router

 

따라서 React-Router-Dom은 React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어준 라이브러리이다!

(리액트도 참 라이브러리가 많아...)

 

 

 

 

vscode에서 설치하기

yarn add react-router-dom

 

사용방법 (1. Browser Router)

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './routes/Home';
import Detail from './routes/Detail';

function App() {
  return (
    <Router> //라우터를 먼저 렌더링 해주고 이 하위부터는 우리가 유저에게 보여주고 싶은 것들
      <Routes> 
        <Route path="/movie" element={<Detail />}></Route>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

// V6부터 Switch가 Routes로 변경되고, 
// Route컴포넌트 사이에 자식 컴포넌트를 넣지않고 element  prop에 자식 컴포넌트를 할당하도록 변경됌

// 9번 줄 처럼 path로 경로를 생성해주고 그 경로(movie)에 사용자가 접속한다면,
// Detail 컴포넌트를 불러온다!

 

사용방법 (2. Browser Router)

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

을 사용하면 주소 중간에 /#/ 가 생긴다.

 

보통은 브라우저 라우터를 많이 쓴다고 한다.