[2023 React.js 스터디] 유승우 #4주차 - React Router v6

1. 라우팅이란?

• 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.
• 리액트 라우터를 사용하여 라우팅 시스템을 구축하면 손쉽게 싱글 페이지 애플리케이션을 만들 수 있다. 

 

 

2. 싱글 페이지 애플리케이션이란?

• 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다.
• 만약 싱글 페이지 애플리케이션에서 다른 페이지로 이동하게 된다면 서버에 다른 페이지의 HTML을 새로 요청하는 것이 아닌 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존의 웹 애플리케이션은 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 된다.

 

 

3. 리액트 라우터 적용 및 기본 사용법

• 프로젝트를 생성 후 리액트 라우터 라이브러리를 설치하면 된다.

$ yarn add react-router-dom

• 그 후 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다.
• 이 BrowserRouter라는 컴포넌트는 History API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(   <BrowserRouter>     <App />   </BrowserRouter> );

• 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;

• 다른 페이지로 이동하는 링크를 보여주는 Link  컴포넌트는 다음과 같이 사용한다.

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

 

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

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

export default Home;

 

4. URL 파라미터와 쿼리스트링

 

1. URL 파라미터

 

• URL 파라미터를 설정할 때는 /profiles/:username과 같이 경로에 :를 사용하여 설정한다.
• URL 파라미터는 userParams라는 Hook을 사용하여 조회한다.

 const params = useParams();

 

2. 쿼리 스트링

• useLocation라는 Hook을 통해 쿼리스트링을 사용할 수 있다.
• userLocation은 location 객체를 반환하며 페이지의 다양한 정보를 지니고 있다. 

1. pathname: 현재 주소의 경로 (쿼리스트링 제외).
2. search: 맨 앞의 ? 문자 포함한 쿼리스트링 값.
3. hash: 주소의 # 문자열 뒤의 값. (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용합니다.)
4. state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값.
5. key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨.

 const location = useLocation();

 

• 쿼리스트링 값을 편하게 파싱하기 위해 useSearchParams를 이용할 수 있다.
• useSearchParms는 배열 타입의 값을 반환하며 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이다.
• 쿼리파라미터가 존재하지 않으면 null로 조회된다.

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

• 위의 예에서 주소창에 ?detail=true&mode=1 입력 시 detail = true, mode = 1로 파싱된다.

 

 

5. 중첩된 라우트

• Outlet 컴포넌트를 이용하여 Outlet 컴포넌트가 사용된 자리에 중첩된 라우트가 보여지게 된다.
• 다음 예에서는 Outlet 컴포넌트가 사용된 자리에 Article 컴포넌트가 보여지게 된다.

      <Route path="/articles" element={<Articles />}>
        <Route path=":id" element={<Article />} />
      </Route>

 

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

const Articles = () => {
  return (
    <div>
      <Outlet />
      <ul>
        <li>
          <Link to="/articles/1">게시글 1</Link>
        </li>
        <li>
          <Link to="/articles/2">게시글 2</Link>
        </li>
        <li>
          <Link to="/articles/3">게시글 3</Link>
        </li>
      </ul>
    </div>
  );
};

export default Articles;

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

const Article = () => {
  const { id } = useParams();
  return (
    <div>
      <h2>게시글 {id}</h2>
    </div>
  );
};

export default Article;

• Outlet 컴포넌트는 공통적으로 보여줘야 하는 레이아웃이 있을때도 유용하게 사용할 수 있다.
• Route 컴포넌트에는 index라는 props가 존재한다. 이는 path="/" 와 동일한 의미를 가진다.

 

 

6. 리액트 라우터 부가기능

• useNavigate는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동할 때 사용하는 Hook이다.  

1. navigate(-1): 뒤로 1번 가기
2. navigate(1): 앞으로 1번 가기

• replace 옵션을 사용하면 페이지를 이동할 때 현재 페이지를 페이지 기록에 남기지 않는다.

const goArticles = () => {
  navigate('/articles', { replace: true });
}

 

 

• NavLink 컴포넌트는 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일을 적용하는 컴포넌트이다.

import { NavLink, Outlet } from 'react-router-dom';

const Articles = () => {
  return (
    <div>
      <Outlet />
      <ul>
        <ArticleItem id={1} />
        <ArticleItem id={2} />
        <ArticleItem id={3} />
      </ul>
    </div>
  );
};

const ArticleItem = ({ id }) => {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };
  return (
    <li>
      <NavLink
        to={`/articles/${id}`}
        style={({ isActive }) => (isActive ? activeStyle : undefined)}
      >
        게시글 {id}
      </NavLink>
    </li>
  );
};

export default Articles;

 

 

• NotFound 페이지는 정의되지 않은 경로에 사용자가 진입했을 때 보여주는 페이지이다.
• *는 와일드카드 문자이며 이는 아무 텍스트나 매치한다는 뜻이다. 엘리멘트 상단에 위치하는 라우트들의 규칙을 모두 확인하고 일치하지 않으면 이 라우트가 화면에 나타나게 된다.

      <Route path="*" element={<NotFound />} />

 

 

• Navigate 컴포넌트는 페이지를 리다이렉트 하고 싶을 때 사용한다.
• 아래의 예에서 isLoggedIn의 값을 로그인 상태에 따라 true 혹은 false를 가르킨다고 가정을 할 때 만약 isLoggedIn의 값이 false이면 Navigate 컴포넌트를 통해 /login 경로로 이동한다. 

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

const MyPage = () => {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    return <Navigate to="/login" replace={true} />;
  }

  return <div>마이 페이지</div>;
};

export default MyPage;

 

 

 

 

React Router v6 튜토리얼