자바스크립트 - React.js

[React.js] Router 라이브러리에 대해서

Lv1_junior_dev 2022. 11. 14. 19:21

❓ Router

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

 

간단한 라이브러리이니 바로 셋팅법과 사용법 등등에 대해서 알아보자

npm install react-router-dom@6

터미널에서 해당 명령을 통해 Router를 설치하자.

 

그리고 src파일 안에 있는 index.js 내부의 코드에

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter> // add
    <App />
    </BrowserRouter> // add
  </React.StrictMode>
);

add라고 주석 처리한 세 곳에 저 코드 그대로 복붙 ! 

끝.

❗ Route 기본 사용법

Router 사용법은 간단하다.

일단 맨 위에 

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

해당 코드를 먼저 추가해주자.

이 번 포스팅에선 Routes, Route, Link, useNavigate, Outlet만 사용할 것이다.

 

👍 각 정의에 대해선 다음과 같다

✔ Routes는 여러 Route를 감싸서 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할을 한다.
✔ Route는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.
✔ Link는 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS클래스를 적용하는 컴포넌트이다.
✔ useNavigate는 다양한 경로를 이동할때, 동작하는 함수를 만들기 위해서 사용한다.
✔ Outlet은 nasted routes 하게 될 때 상위 라우터에 하위 라우트를 동시에 표현할 수 있게 된다.
    만약 Outlet을 쓰지않는다면 하위 라우트는 출력이 되지않는다.

다음으로 <Routes>안에 <Route>를 넣고 사용하면 된다

<Routes>
   <Route path="원하는 경로" element = {""}> </Route>
</Routes>

<Routes>안에 <Route>를 넣고 사용하면 된다

path에는 해당 라우트의 경로를 지정하고 element는 경로로 이동했을 때 출력할 컴포넌트들을 정의해주면 된다.

❗ Nasted routes 란? (중첩 라우트)

Nasted routes는 말 그대로 Route를 중첩 시키는 것이다.Route로 불러온 컴포넌트 내부에 Router가 하나 더 존재하는 형태인 것이다. 다만, 상위 컴포넌트의 URL값을 공유하고, 상태값을 주소값이 일부 대처하는 정도의 특징을 보인다.

 

만약 쇼핑몰에서 상품들이 있고 상품들 중 1번 상품을 클릭했을 때 1번 상품에 해당하는 경로를 가진 홈페이지가 있다고 하자.

<Routes>
    <Route path="/product" element={<div><AboutComponent/></div>}>
    <Route path="product1" element={<div>about member</div>}> </Route>
    </Route>
</Routes>

그럼 이렇게 <Routes>안에 <Route>를 넣고 가장 상위 <Route>안에 <Route>를 넣으면 된다

이렇게 된다면 product1의 접근 방법은 /product/product1으로 접근이 가능한것이다.

✔ Nasted routes는 최상위 컴포넌트에서 변동되는 컴포넌트가 거의 없을 때 사용한다고 한다.

❗ URL Parameter

Nasted routes과 함께 사용할 수 있는 기능을 하나 더 알아보고 가자.

만약 어떤 쇼핑몰에 상품(product)가 100개있는 물건이 있다.

그러면 어떻게 만들것인가 ?

<Routes>
    <Route path="/product" element={<div><AboutComponent/></div>}>
    <Route path="1" element={<div>about member</div>}> </Route>
    <Route path="2" element={<div>about member</div>}> </Route>
    <Route path="3" element={<div>about member</div>}> </Route>
    <Route path="4" element={<div>about member</div>}> </Route>
	....
    </Route>
</Routes>

이렇게 100개를 만들수는 없을터.

 

그래서 여기서 쓸 수 있는게 바로 URL Parameter이다

URL Parameter는 사용자가 /product/1, /product/2, /product/3 이렇게 입력했을 때

Parameter 값으로 입력되는 1,2,3 같은 애들을 불러다가 쓰는거다

 

사용법은 간단하다

import { useParams } from "react-router-dom"

제일 위에 임포트 해주고

let {id} = useParams();

console.log(id) // product/152를 입력하면 152가 출력된다

해주면 끝이다.

❗ 404 페이지 만들기 (빈 페이지)

만약 Route 해준 경로 이외의 경로에 접속했을 때는 404처리를 해서 사용자가 옳지못한 경로의 페이지로 접근했다고 알려주어야한다.

해당 방법은 간단하다

<Route path="*" element={<div>빈 페이지</div>}></Route>

끝.