React-Router-Dom(v6)

minseok oh·2022년 3월 14일

react router dom

Comento(React)

목록 보기

5/7

시작하기

React-Router-Dom에 대해 프로젝트를 하면서 사용해 본적은 있지만 구체적인 이론?을 정리 하질 않고 사용하였다. 요번에는 블로그에 남기면서 사용하고자 한다.

프로젝트 준비

JavaScript

$ npm install react-router-dom

TypeScript

$ npm i @types/react-router-dom

프로젝트 라우터 적용

1. BrowserRouter

이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해 줍니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

2. 페이지 컴포넌트

이제 리액트 라우터를 통해 여러 페이지로 구성된 웹 애플리케이션을 만들기 위하여 각 페이지에서 사용할 컴포넌트를 만들 차례이다.
가장 먼저 보여지게 될 Home 페이지 컴포넌트 와 웹 사이트를 소개하는 About 페이지 컴포넌트 생성

// src/pages/Home.jsx
const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>가장 먼저 보여지는 페이지입니다.</p>
    </div>
  );
};

export default Home;

// src/pages/About.jsx
const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
    </div>
  );
};

export default About;

3. 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주기 위해서 Route 라는 컴포넌트 사용

Routes 라는 컴포넌트 안에 Route 컴포넌트 사용

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

import { Route, Routes } from 'react-router-dom';
 import About from './pages/About';
 import Home from './pages/Home';

  const App = () => {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    );
  };

  export default App;

4. Link 컴포넌트를 사용하여 다른 페이지로 이동

Link : 다른 페이지로 이동하는 링크
=> a태그를 바로사용하면 안됨, 페이지를 새로 불러오는 것을 막고 History API를 통해 주소의 경로만 바꾸는 기능이 내장되어 있어서

a 태그 : 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러온다

<Link to="경로">링크 이름</Link>

  // src/pages/Home.jsx
  import { Link } from 'react-router-dom';

  const Home = () => {
    return (
      <div>
        <h1>홈</h1>
        <p>가장 먼저 보여지는 페이지입니다.</p>
        <Link to="/about">소개</Link>
      </div>
    );
  };

  export default Home;

URL 파라미터와 쿼리 스트링

페이지 주소를 정의할 때 유동적인 값을 사용해야 할 때

URL 파라미터 예시: /profile/max
쿼리 스트링 예시: /articles?page=1&keyword=react

URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태
=> (ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용)

쿼리 스트링은 주소의 뒷부분에 ?문자열 이후에 key=value로 값을 정의하며 &로 구분하는 형태
=> 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 떄 사용

1. URL 파라미터

URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회
profile 컴포넌트에서 username URL 파라미터를 통하여 프로필을 조회

src/App.js

import React from 'react';
import './style.css';
import { Route, Routes } from 'react-router-dom';
import { Home, About, Profile } from './pages';
const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profiles/:username" element={<Profile />} />
    </Routes>
  );
};
export default App;

URL 파라미터는 /profiles/:username 과 같이 경로에 : 를 사용하여 설정합니다

src/pages/Home.jsx

import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>가장 먼저 보여지는 페이지입니다.</p>
      <ul>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles/minseok">Minseok의 프로필</Link>
        </li>
        <li>
          <Link to="/profiles/void">존재하지 않는 프로필</Link>
        </li>
      </ul>
    </div>
  );
};
export default Home;

src/pages/Profile.jsx

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

const data = {
    minseok: {
      name: '오민석',
      description: '프론트엔드 개발자',
    },
  };

const Profile = () => {
    const params = useParams();
    const profile = data[params.username];
  return (
    <div>
      <h1>사용자 프로필</h1>
      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>존재하지 않는 프로필입니다.</p>
      )}
    </div>
  );
};
export default Profile;

2. 쿼리 스트링

src/pages/About.jsx

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

const About = () => {
  const location = useLocation();

return (
   <div>
     <h1>소개</h1>
     <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
     <p>쿼리스트링: {location.search}</p>
   </div>
  );
};

export default About;

useLocation 이라는 Hook을 사용했는데 location 객체를 반환하며 이 객체는 현재 사용자가 보고있는 페이지의 정보를 지니고 있다
- pathname: 현재 주소의 경로 (쿼리스트링 제외)
- search: 맨 앞의 ? 문자 포함한 쿼리스트링 값
- hash: 주소의 # 문자열 뒤의 값 (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용합니다.)
- state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값
- key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마 다 고유의 값이 생성됨
쿼리스트링을 따로 파싱까지 해야된다면 번거로울수도 있는데, v6부터 useSearchParams 라는 Hook을 통해서 쿼리스트링을 다룰 수 있다.
다음은 이 Hook을 사용하여 쿼리스트링을 쉽게 파싱하여 사용하는 예시입니다.

src/pages/About.js

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

const About = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const detail = searchParams.get('detail');
  const mode = searchParams.get('mode');

const onToggleDetail = () => {
    setSearchParams({ mode, detail: detail === 'true' ? false : true });
  };

const onIncreaseMode = () => {
    const nextMode = mode === null ? 1 : parseInt(mode) + 1;
    setSearchParams({ mode: nextMode, detail });
  };

  return (
      <div>
        <h1>소개</h1>
        <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
        <p>detail: {detail}</p>
        <p>mode: {mode}</p>
        <button onClick={onToggleDetail}>Toggle detail</button>
        <button onClick={onIncreaseMode}>mode + 1</button>
      </div>
  );
};

export default About;

useSearchParams 는 배열 타입의 값을 반환
첫번째 원소는 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환
get 메서드를 통해 특정 쿼리파라미터를 조회할 수 있고, set 메서드를 통해 특정 쿼리파라미터를 업데이트 할 수 있습니다. 만약 조회시에 쿼리파라미터가 존재하지 않는다면 null 로 조회됩니다.
두번째 원소는 쿼리파라미터를 객체형태로 업데이트할 수 있는 함수를 반환합니다.

주의점

쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이라는 것 입니다. 즉, true 또는 false 값을 넣게 된다면 값을 비교할 때 꼭 'true' 와 같이 따옴표로 감싸서 비교를 하셔야 하고, 숫자를 다루게 된다면 parseInt 를 사용하여 숫자 타입으로 변환을 해야 한다.

minseok oh

현재는 FE(Front) 개발자 미래엔 FSE(Full Stack) 개발자

이전 포스트

개발자 & 개발 공부

다음 포스트