Back
Featured image of post [React] 리액트 라우터 기본 사용방법
Frontend

[React] 리액트 라우터 기본 사용방법

React Router v6 핵심 요약

페이지 라우팅

vue를 처음 접했을 때 이해했던 개념이지만, 한번 더 정리하자면 일단 라우터라는 개념은 네트워크 상에서 통신 데이터를 보낼 경로를 선택하는 과정을 의미한다. SPA 환경의 웹 애플리케이션(Vue, React, Angular)에서는 말 그대로 요청(Request)에 따라 알맞은 페이지를 반환해주는 과정 자체로 이해하면 된다.

SPA의 단일 페이지라는 이점을 살려, MPA(Multi Page Application) 환경과는 달리 페이지자체를 반환하지 않고 데이터만 불러와 렌더링해주기 때문에 사용자 입장에서 훨씬 빠르다고 느낄 수 있다. 또한 클라이언트에서 렌더링을 다루기때문에 CSR(Client Side Rendering)이라고도 불린다.

꼭 알아둘 점은!! 라우팅 라이브러리를 사용한다고 SPA환경에서 MPA 환경으로 바뀌는 것이 아니라 SPA 특징인 페이지는 단일로 유지하되 index.html 컴포넌트와 라우터를 통해 화면에 보이는 데이터들과 컴포넌트들을 계속 변경해주면서 마치 페이지를 이동한 효과를 주는 방식이다.

React Router

설치하기

React Router 공식 페이지에 친절히 설명되어 있다. 현재 릴리즈된 버전은6버전이며 아래와 같이 설치한다.

npm install react-router-dom@6

기본 사용방법

라우팅 기능을 사용하려면 BrowserRouter 컴포넌트를 최상위 태그에 감싸주면 된다.
앱에서 단 하나의 라우터만 사용하여야한다.

//App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './pages/Header';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Board from './pagres/Board';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/board" element={<Board />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}
  • BrowserRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
  • Routes : 자식 route들을 구성하고 있는 단위이다.
  • Route : path를 통해 URL을 분기시킬 수 있다. 중첩해서 사용할 수 있다. (중첩 라우팅)

링크 이동하기

페이지를 갱신하지 않고 렌더링 방식으로 이동하려면 Link 컴포넌트를 사용하면된다.
HTML 앵커 태그로 자동으로 변환해준다.

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

function Nav() {
  return (
    <div>
      <Link to={'/'}>Home</Link>
      <Link to={'/board'}>Board</Link>
      <Link to={'/profile'}>Profile</Link>
    </div>
  );
}

export default Nav;

URL 제어하기

Path Variable

특정 자원에 접근하기 위해 사용한다. 흔히 Query String과 헷갈리는 경우가 있는데 쿼리 스트링은 필터링 목적에 가깝고, PathVariable에는 특정한 자원에 접근하는 목적에 사용하는 것이 옳다. 리액트 라우터에서 콜론(:)과 useParams hook을 이용해 URL 파라미터를 받을 수 있다.

<Link to={'/profile/:userId'}>Profile</Link>

//Profile.js
import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();
  return (
    <div>
      <h2>{`${userId}의 Profile Page`}</h2>
    </div>
  );
}

export default Profile;

Query String

URL을 통해 웹 페이지에 데이터를 전달하는 방법이다. 보통 쿼리 형태로 되어있는데 많은 웹사이트에서 특히 조회 페이지에 많이 사용된다. 아래 URL 형태를 보면(네이버 금융 예시) article_id와 office_id 같은 값들을 전달해주고 있다.

iShot_2022-06-22_22.54.49.png

Path Variable과는 다르게 라우팅에 영향을 끼치지 않기 때문에 <Link>에 따로 명시를 하지 않아도 된다.
해당 컴포넌트에서 useSearchParams hook을 사용해 값을 확인할 수 있다.

//url : http://localhost:3000/board?userId=yondo123&docId=123
import { useSearchParams } from 'react-router-dom';

function Board() {
  const [searchParams, setSearchParams] = useSearchParams();
  return (
    <div>
      <h2>Board Page</h2>
      <p>
        작성자 : <span>{searchParams.get('userId')}</span>
      </p>
      <p>
        게시글 번호 : <span>{searchParams.get('docId')}</span>
      </p>
    </div>
  );
}

export default Board;

useSearchParams 메서드로 배열을 받아올 수 있는데 비구조화 할당을 통해 두 개의 프로퍼티들을 가져올 수 있다. (물론 이름은 자유)

  • searchParams : 쿼리 스트링의 key에 대한 value를 가져온다.

    const [searchParams, setSearchParams] = useSearchParams();

const userId = searchParams.get('userId');
const docId = searchParams.get('docId');

  • setSearchParams : uri 쿼리스트링을 변경한다.

    const [searchParams, setSearchParams] = useSearchParams();

setSearchParams({ key: 'value' });

참고 자료

© 2020 - 2023 Jiny