[React.js] 페이지 이동하기 (페이지 라우팅이란?) ✨

개요

일단 연결해보라는데? 어어 했어

 

프로젝트를 하면서 지금까진, 남이 해주는 router push 로 살아가거나 <a href="/" > 어쩌고를 사용하여 페이지 간에 이동하곤 했다.

일단 써먹던 것도 제대로 무엇인지 모르고 페이지 라우팅이란 뭘까 그리고 React 에서 페이지 이동은 어떻게 하는 것이 옳은 것일까 궁금증이 생겨 조사하기 위해 글을 작성한다.

 

라우팅이란?

웹 애플리케이션에서 라우팅이란 사용자가 요청한 URL 에 따라 알맞은 페이지를 보여주는 것을 의미한다.

Single Page Application (SPA)

React 에서는 페이지 별로 컴포넌트화 하여 분리한 후 한 개의 페이지에 불러온다. React 는 대표적인 SPA 이다.

기술적으로는 한 페이지만 존재하지만 라우팅 시스템을 사용하여 사용자의 브라우저 주소창의 경로에 따라 알맞은 페이지를 보여준다. 즉 링크를 눌러서 다른 페이지로 이동할 때 서버에 다른 페이지의 html 을 새로 요청하는 것이 아니라 브라우저의 History API 를 사용하여 브라우저의 주소창의 값만 변경하고 기존의 페이지에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 불러오는 것이다. 

 

💭 History API 가 뭐지?

React-Router

React 에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 React Router 와 Next.js 이다.

오늘은 React Router 에 대해 먼저 공부할 것이다.

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

사용자의 브라우저 주소 경로에 따라 우리가 원하는 페이지 컴포넌트를 보여주려면 Route 를 사용한다. 

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

<Route path="/home" element={Home}/>

Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다.

2. Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

웹 페이지에서는 원래 링크를 보여줄 때 a 태그를 사용한다. 리액트 라우터를 사용하는 프로젝트에서는 a 태그를 바로 사용하면 안 된다. 왜냐하면 a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문이다. Link 컴포넌트 역시 a 태그를 사용하긴 하지만 페이지를 새로 불러오는 것을 막고 History API 를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

 

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

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

URL 파라미터와 쿼리스트링 (Querystring)

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

URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태이고, 쿼리스트링은 주소의 뒷부분에 ? 문자열 이후에 key=value 로 값을 정의하며 & 로 구분하는 형태이다. URL 파라미터는 주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용하고, 쿼리스트링은 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용한다.

 

URL 파라미터는 useParams 라는 Hook 을 사용하여 객체 형태로 조회할 수 있다. 

중첩된 라우트 + 레이아웃

리액트 라우터에서 제공하는 Outlet 이라는 컴포넌트를 사용하면 레이아웃을 만들 수 있다. Outlet 에서는 Route 의 children 으로 들어가는 JSX 요소를 보여주는 역할을 한다.

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

const layout = () => {
  return(
    <div>
       <header>
       Header
       </header>
       <main>
       <Outlet />
       </main>
     </div>  
   );
  };
  
  export default Layout;

이렇게 layout 을 만들어 주고 나서 app.js 에서 라우팅한 것들을 감싸준다.

그럼 레이아웃 완성~!

useNavigate

useNavigate 는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에 사용하는 Hook 이다.

 

정리

어떤 상황에서 어떤 걸 쓰는 게 맞는지 아직 잘 몰루겠다...! 더 알아보고 사용법도 더 자세히 알아봐야지