➡️ React Router

REACT ROUTER V6

REACT에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

1. 설치

React Router library 설치해야 React에서 Router기능을 사용할 수 있다.
React-Router 라이브러리 공식 문서 의 설치 방법

npm install react-router-dom@6

• 설치 후, 완료 된 것을 확인하는 방법
  -> package.json에 "react-router-dom"로 설치 유무와 버전 확인 가능

2. 코드 설정

import { BrowserRouter } from 'react-router-dom';

3. 적용

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>APP.js</h2>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/new' element={<New />} />
          <Route path='/edit' element={<Edit />} />
          <Route path='/diary' element={<Diary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

1. <BrowserRouter> 를 App.js의 return요소를 전체적으로 감싼다.
2. <Routes> : Router할 페이지들을 자식요소로 설정하여 작성한다.
3. <Route/> : 의 자식요소로 사용되며 Router될 컴포넌트 페이지들을 연결시킨다.
   • path='/new' : 페이지 이동할 주소를 설정한다.
   • element={<New />} : 이동할 페이지의 컴포넌트를 설정한다.
     

• <Routes> 밖에 있는 요소들은 페이지가 이동 되어 고정된다. 따라서 페이지가 이동되어도 변화하지 않고 공통된 요소를 같은 컴포넌트를 위치하면 편하게 사용할 수 있다.

❗import 주의!

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

➡️ 페이지 이동 버튼 만들기 : Link 태그

React-Router 라이브러리 안에 들어있어 기능 중에 하나로 HTML의 a태그와 비슷하지만 CSR 방식으로 페이지를 라우팅 시킨다.

1. import 설정

import { Link } from 'react-router-dom';

Link는 to를 이용해 path(경로)를 지정 할 수 있으며 Html의 a태그 처럼 사용이 가능하다.

2. Link 컴포넌트 생성

import { Link } from 'react-router-dom';

const RouterTest = () => {
    return <>
        <Link to={"/"}>HOME</Link>
        <br />
        <Link to={"/diary"}>DIARY</Link>
        <br />
        <Link to={"/new"}>NEW</Link>
        <br />
        <Link to={"/Edit"}>EDIT</Link>
    </>
};

export default RouterTest;
  

RouterTest컴포넌트를 App.js에 import시켜서 작동시키면 SCR(Client Side Rendering)방식이 작동되어 빠르게 작동하게 된다.