[React] React-Router-DOM과 API에 대해 알아보자 (feat. 따라하며 배우는 리액트 A-Z)

1. React-Router-DOM

리액트에서 브라우저 URL을 관리하고 페이지 라우팅을 처리하는 라이브러리

이 라이브러리를 사용하면 리액트 어플리케이션을 다중 페이지로 구성하고 각 페이지의 경로를 정의할 수 있다.

 

📌 라우팅과 리액트 라우터

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

리액트는 SPA(Single Page Application)으로 새로운 페이지를 로드하는 게 아니라 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 띄고 있다. 리액트 라우터는 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 역할을 한다. 

 

그러니까 실질적으로는 하나의 페이지만 있는데 URL에 따라 그 데이터를 렌더링 해주는 역할로 이해했다.

 

📌 용도에 따른 패키지 종류

react-router: 웹&앱

react-router-dom: 웹

react-router-native: 앱

 

설치는 npm install react-router-dom --save로 할 수 있다

설치가 끝났다면 이런 식으로 App.js의 root 부분을 BrowserRouter로 감싸준다.

 

BrowserRouter는 리액트 라우터 돔의 라우터 컴포넌트로 브라우저의 주소를 관리하고 해당 주소에 따라 적절한 컴포넌트를 랜더링한다.

HTML5 History API를 사용해서 UI를 URL과 동기화 시킨 상태로 유지한다고 한다. (?)

지금 App 컴포넌트를 감싸서 라우팅을 적용하기 위해 이렇게 해두었다.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

 

📌 Routes: 앱에서 생성될 모든 개별 경로에 대한 상위 역할을 한다. Route로 생성된 자식 컴포넌트 중 매칭되는 첫 번째를 렌더링한다.

📌 Route: 단일 경로를 만드는데 사용된다. 2가지 속성 (path, element가 있다.)

path는 원하는 컴포넌트의 URL 경로를 지정할 수 있다.

경로 이름을 원하는대로 지정할 수 있으며 백슬래시(/)의 경우 앱이 처음 로드될 때마다 렌더링된다. 

element는 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.

 

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<MainPage />} />
          <Route path=":movieId" element={<DetailPage />} />
          <Route path="search" element={<SearchPage />} />
        </Route>
      </Routes>
    </div>
  );
}

앱이 처음 로드될 때마다 Layout 컴포넌트가 렌더링된다.

index는 <Route> 컴포넌트의 속성 중 하나로, 경로가 정확히 일치하는 경우 해당 경로를 기본 페이지로 설정한다.

경로가 정확히 일치할 경우 더 렌더링할 게 있으면 이 밑으로 index ~ 를 동일하게 적어주면 된다.

나머지 path 부분은 경로에 :movieId나 /search의 경우 element에 해당하는 컴포넌트를 렌더링한다.

 

이때 이동할 컴포넌트들을 다 기본적으로 만들어둔다.

---

2. React-Router Hooks

📌 Link 컴포넌트

HTML a 태그와 유사하게 to 속성에 이동할 경로를 지정해 탐색 링크로 사용자가 이동하게 하는 컴포넌트도 있다.

Route 와의 차이점은 Link가 그 경로로 이동 시키는 반면, Route는 그 경로를 렌더링한다는 점에서 차이가 있다.

자세히 이해하진 못했지만 아래 블로그에 관련된 내용이 적혀 있다.

 

REACT ROUTER란?

const Layout = () => {
  return (
    <div>
      <Nav />
      <Outlet />
      <Footer />
    </div>
  );
};

📌 Outlet ⭐️

Routes 컴포넌트 내에서 현재 경로에 해당하는 Route 컴포넌트의 콘텐츠를 렌더링하는 역할을 한다.

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet을 써주어야 한다. 

 

📌 useNavigate ⭐️

React-Router의 Hooks 중 하나로 경로를 변경하고 탐색한다.

주로 함수 내에서 사용되며 경로를 변경해 해당 경로에 대한 콘텐츠를 렌더링하거나 다른 페이지로 이동할 때 사용된다.

const navigate = useNavigate()이런 식으로 사용하는데 괄호 안에 1을 넣으면 앞으로, -1을 넣으면 뒤로 가진다.

이 안에 '/[경로]'를 입력하면 그 곳으로 경로가 변경된다.

 

📌 useParams ⭐️

React-Router의 Hooks 중 하나로 동적 경로 매개변수를 추출하는데 사용된다. (말이 왜 이렇게 어려움?)

<Route path="/users/:id" component={UserDetails} />

이런 경로가 있다고 할 때 id는 변경될 수 있는 경로 매개변수다. (:를 붙여 사용한다.)

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

function UserDetails() {
  const { id } = useParams();

  return (
    <div>
      User ID: {id}
    </div>
  );
}

이 id 값을 추출해서 쓰고 싶을 때 useParams를 쓰면 된다.

 

📌 useLocation ⭐️

React-Router의 Hooks 중 하나로 어플리케이션의 현재 위치 정보를 가져오는데 사용된다.

다른 경로로 이동하거나 URL이 변경되면 이걸 사용해서 현재 위치 정보를 가져올 수 있다.

 

pathname은 현재 경로의 문자열 부분, search는 쿼리 문자열, hash는 해시 문자열 부분으로 아래와 같이 사용된다.

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

function MyComponent() {
  const location = useLocation();

  console.log(location.pathname); // 현재 경로의 문자열 부분
  console.log(location.search); // 쿼리 문자열
  console.log(location.hash); // 해시 문자열

  // 현재 경로에 따라 조건부 렌더링 등의 로직 수행

  return <div>...</div>;
}

 

📌 useRoutes ⭐️

React-Router의 Hooks 중 하나로 경로를 기반으로 매칭되는 라우트를 찾아 랜더링한다.

Routes와 기능적으로는 동일하나 JS 객체를 사용해 경로를 정의하여 JSX가 필요하지 않다.

 

강의에 사용된 건 BrowserRouter, Route, Routes, useNavigate, useLocation, outlet다.

훅들이 뭔가 다 비슷비슷하게 생겼고 아직 기능이 다 숙지되진 않았는데 그냥 일단 흐름에 몸을 맡겨보자... 😇