[React] React-Router 사용법

JCH27·2023년 12월 24일

React react router

react

목록 보기

5/8

리액트 라우터 사용법을 정리해보고자 한다.

리액트 라우터란?

CSR(Client Side Routing)이 가능하게 해주는 라이브러리로 경로가 바뀌는 경우, 서버에 별다른 요청을 보내지 않고 클라언트의 브라우저 단에서만 여러 페이지를 바꾸며 방문하는 기능을 제공한다.
Single Page Application(SPA) 을 유지하면서 멀티 페이지의 장점을 그대로 사용할 수 있다.
history 를 이용할 수 있어 페이지를 다시 로드했을 때 원하는 컴포넌트를 볼 수 있다.

라우팅이란??

네트워크에서 경로를 선택하는 프로세스로 새로운 url 경로를 입력하면 url에 해당하는 새로운 페이지를 서버에 요청해 새로운 HTML을 받아와 페이지 전체가 업데이트 되는 것을 의미한다.

Chat-gpt : React Router는 React 애플리케이션에서 네비게이션을 관리하기 위한 라이브러리입니다. react-router-dom은 React Router의 웹 애플리케이션을 위한 도메인을 처리하는 패키지입니다. 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 여러 페이지로의 전환과 URL 변경에 대한 라우팅을 쉽게 처리할 수 있습니다.

리액트 라우터에서 제공하는 라우터, 제공자, 컴포넌트, 훅스

createBrowserRouter : 데이터 API를 지원하는 라우터 중 하나로 DOM History API를 사용하여 URL을 업데이트하고 기록 스택을 관리한다.

RouterProvider : 라우터 제공자 중 하나로 모든 데이터 라우팅 요소는 RouterProvider에 전달되어 앱을 렌더링하고 나머지 데이터 API를 활성화한다.

Outlet : 라우터 컴포넌트 중 하나로 RouterProvider의 요소 내에서 경로에 따라 컴포넌트를 랜더링 하는 컴포넌트이다.

Link : 라우터 컴포넌트 중 하나로 html요소 중 a태그와 같은 기능을 한다.

useParams : 라우터에서 제공하는 훅 중 하나로 url 매개변수의 key-value 쌍을 객체로 반환해준다.

useNavigate : 라우터에서 제공하는 훅 중 하나로 OM History API를 사용하여 URL을 업데이트하고 기록 스택을 관리한다.

리액트 라우터 설치하기

npm : npm install react-router-dom
yarn : yarn add react-router-dom

리액트 라우터 사용법

1. 라우팅을 할 컴포넌트에 createBrowserRouter 함수로 router 객체를 생성

createBrowserRouter : 라우터 객체를 생성하며 라우팅 될 컴포넌트와 경로에 대한 정보들을 전달받는다.

RouterProvider : 라우팅 요소를 보여주는 제공자로 router 속성에 생성된 라우터 객체를 할당받는다.

	// react-router-dom 으로부터 createBrowserRouter, RouterProvider 를 불러온다.
	import {createBrowserRouter, RouterProvider} from 'react-router-dom';

	function app(){
      
      // createBrowserRouter 함수를 사용해 라우터 객체를 생성해준다.
      // createBrowserRouter 는 배열을 인자로 받으며 배열의 값은 객체 형식이다.
      const router = createBrowserRouter([
        {
          // 첫 번째 객체로 index 페이지를 설정해준다.
          path : '/',
          element : <Index />,
          // children 프로퍼티에 자손 경로와 컴포넌트를 입력해준다.
          children : [{
          	// 인덱스 페이지에서 보일 컴포넌트의 경우 index 프로퍼티를 true로 할당해준다.
        	index : true,
          	element : <Home />
       	  },
          {
            // 경로에 따라 컴포넌트를 라우팅 할 경우 path 프로퍼티에 경로를 문자열로 할당한다.
          	path : '/products',
            element : <Products />
          },
          {
            // 컴포넌트에서 사용할 param 값을 경로 마지막 부분에 설정해줄 수 있다.
            path : '/products/detail/:code',
            elemeht : <ProductDetail />
          }  
          ]}
      ]);
    
      return (
      	<>
        	// RouterProvider 가 라우팅 될 컴포넌트들을 보여준다.
        	<RouterProvider router={router} />
      	</>);
    }

2. useParams 와 useNavigate 사용하기

useParams : 라우터 객체에 작성된 url 매개변수를 객체로 구조분해할당 할 수 있다.

useNavigate : navigate 객체를 생성해 경로를 이동할 수 있고, 저장된 이전 경로로 이동할 수 있다.

	// useParams를 사용해 경로에 작성된 변수를 사용할 수 있다.
	// useNavigate를 사용해 경로를 설정할 수 있고, 이전 경로를 기억해 이동할 수 있다.
	import {useParams, useNavigate} from 'react-router-dom';

	function ProductDetail(props){
      
      // createBrowserRouter 함수에 작성해 둔 param 값을 객체로 할당받아 사용할 수 있다.
      const {code} = useParams();

      // useNavigate를 사용해 navigate 객체 생성
      const navigate = useNavigate();
      
      return (
        <>
        	// 뒤로가기를 사용할 경우 navigate 객체에 -1을 전달한다.
        	<button onClick={()=> navigate(-1)}>뒤로가기</button>
        	{code} 번 상품입니다.
        </>
      );
    }
	export default ProductDetail;

3. Outlet으로 랜더링 될 컴포넌트를 레이아웃

	import {Outlet} from 'react-router-com';
	
	function Index(props){
      
      return(
      <>
        // Header 는 경로가 바뀌어도 유지된다!!!
        <Header />
        
        // 경로가 바뀌면 랜더링 되는 부분
        <Outlet />
      </>
      );
    }

4. Link 태그 사용

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

function Header(props) {

  const style = {
    flex : {
      display : 'flex',
      listStyle : 'none'
    }
  }

  return (
    <div>
      헤더 입니다.
      <ul style={style.flex}>
    	// 헤더 gnb로 클릭 시 경로가 이동되도록 한다.
        <li> <Link to='/'>홈</Link></li>
        <li> <Link to='/products'>상품리스트</Link></li>
      </ul>
    </div>
  );
}

export default Header;