✏️ React의 Router 사용하기, react-router-dom

 

 

React 의 라우터 개념

사용자가 클릭하는 URL에 따라 해당 URL에 해당되는 페이지를 보여준다.

리액트에서는 많이 사용하는 React Router의 사용방법을 알아보자!

결국 라우팅은 페이지를 이동시킨다. 라고 생각하면 된다.

 

 

들어가기 앞서 `React`는 `SPA`방식이라는 것을 알 것이다.
`MPA` 방식처럼 새로운 페이지를 로드하는 방식이 아니고,
하나의 페이지 안에서 필요한 데이터를 가져오는 형태를 가진다.
그러기 때문에 React-router는 신규페이지를 불러오지 않는 상황에서
각각의 url에 따라서 선택된 데이터를 하나의 페이지에서 랜더링 해주는 라이브러리라고 볼 수 있다. 

 

 

 

 

 

 

설치

npm i react-router-dom
//또는
yarn add react-router-dom

 

 

 

 

폴더구조

폴더구조는 다를 수 있지만 

`shared` 폴더에 해당 `Router` 컴포넌트를 생성해준다.

 

 

 

 

 

 

사용 예시

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

 

import로 불러올 내용은 3가지이다.

`BrowserRouter`, `Routes`, `Route` 를 불러온다.

 

 

 

 

 

 

import { BrowserRouter, Routes, Route } from "react-router-dom";
  return (
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={<Home />}
          />
          <Route
            path="/detail/:id"
            element={<Detail />}
          />
        </Routes>
      </BrowserRouter>
  );
};

export default App;

 

`BrowserRouter`로 모든 내용을 감싸준다.

라우터로 링크를 이동해서 나와줄 부분만 `Routes`로 감싸준다. 

그럼 `Routes` 안에 묶인애들은 url에 따라 모든 페이지를 이동시켜준다.

`Routes`외부는 공통으로 보여주는 부분이다. (헤더나 푸터)

header나 footer같은 경우 모든 브라우저에서 보여야 하니 제외하고 감싸준다.

 

 

 

 

 

 

 

 

`Route`는 `path=""` 로 이동할 경로를 설정해준다.

`path="/"`  슬래쉬는 첫페이지를 말해준다.

`element`는 이동할 페이지의 컴포넌트를 보여준다.

즉 처음 들어왔을 때, 예시를 보면 `Home`이라는 컴포넌트를 보여주고

`Detail`페이지로 이동할 때 뒤에있는 id값의 url과 함께 Detail 페이지로 이동한다.

 

 

 

 

---

 

 

 

Router의 연장선, Outlet 사용해보기

✏️ React Router의 Outlet 사용하기