React-Router-Dom

React-Router-Dom에 대해서 알아보자!

 

우선 간단하게 라우팅이란..

-> 네트워크의 경로를 선택하는 process 라고 말한다. 쉽게 풀어서 말하자면 내가 가야 할 곳의 목적지를 맞게 이동시켜 주는 작업이라고 볼 수 있다. 

 

React-Router를 사용하는 이유

 

리액트는 기본적으로 SPA(Single Page Application)이다.

컴포넌트의 변화가 단일 페이지 안에서 일어난다. 그렇기에 다른 URL로 이동한다고 해도 페이지 전체가 교체되는게 아니라 한 페이지에서 컴포넌트의 변화만 일어난다. -> 이렇기에 사용자의 히스토리가 생기기 않아 뒤로가기 기능을 수행 할 수없고 특정 페이지 북마크, 새로고침 기능이 불가능해진다.

이러한 단점을 React-Router로 보완한다.

 

 

Router의 종류에는 2가지가 있는데

HashRouter(URL의 해시 값을 사용함), BrowserRouter(histort API 사용) 가 있다.

개인적이고 작은 단위의 프로젝트면 HashRouter를 사용해도 좋다.

하지만 웬만하면 서버가 존재하고 SEO가 필요하다면 BrowserRouter 사용 하자!

 

 

 

React-Router-Dom : React로 생성된 SPA 내부에서 페이지 이동이 가능하게 만드는 라이브러리

 

import { BrowserRouter, Routes, Route } from 'react-router-dom'

위에 적힌 3가지 모듈에 대해서 살펴보자면..

BrowserRouter

• history API를 활용해 history 객체를 생성한다.
• history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다!!

Route

• 현재 브라우저의 location(window.href.location 정보를 가져온다) 상태에 따라 다른 element를 렌더링한다.
• Route.element: 조건이 맞을 때 렌더링할 element,
  <Element />의 형식으로 전달된다!!
• Route.path: 현재 path값이 url과 일치하는지 확인해 해당 url에 매칭된 element를 렌더링해준다!!

Routes

• 모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다!

 

Link

Link 컴포넌트는 라우터 내 직접적인 페이지 이동을 원할 때 사용된다.

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

function Nav(){
  return (
    <div>
      <Link to='/'> Home </Link>
      <Link to='/about'> About </Link>
    </div>
  );
}

export default Nav;

이렇게 to 속성에 경로를 넣는 방식으로 사용된다. Link 컴포넌트의 특징을 살펴보면..

1. Relative : 계층 구조에 상대적이고, 상대 경로 표현 가능

2. preventScrollReset : 페이지 중간에 있는 컨텐츠 내부에서 tab 목록을 누르는 것과 같은 시도를 할 때, 기존의 Link 컴포넌트였다면 클릭 시 스크롤이 초기화되어 페이지 가장 위로 이동하게 된다. -> 속성을 true로 설정하여 방지한다.

3. state : useLocation Hook과 연계하여 특정 state를 넘겨 줄 수도 있다.

 

정리하자면 Link는 자체적으로 컴포넌트의 상태 유지하며 화면 전체 렌더링을 방지하는 기능이 포함된 a 태그 상위버전이라고 할 수 있을 것이다.

 

 

useNavigate

특정 이벤트(onClick)가 발생할때 페이지 이동을 트리거 할 수 있다.

일반 요소 클릭시 Link로 감싸는 것 보다 useNavigate 훅을 사용하는 것이 더 좋을 것이다.

useNavigate 속성에는

1. replace: 기본 값 false, true 설정 시 이동 후 뒤로가기 불가능

2. state : Link와 비슷하게 state 전달 가능

 

 

중첩 라우팅

특정 페이지 내에서 하위 페이지를 만들 수 있고, 해당 페이지마다 경로를 이용한 데이터 전달도 가능하다.

또한 중첩 라우팅 구현 시 해당 하위 페이지 이외 컨텐츠가 바뀌지 않는다.

 

Outlet : 라우팅 컴포넌트 내부에서 사용되고, 중첩된 자식 라우트가 렌더링 되는 위치를 지정한다.

<Route path="/about" element={<About />}>
  <Route path="location" element={<Location />}></Route>
</Route>

이렇게 about 주소 하위에 location 하위 라우팅이 된 것을 볼 수 있고, 이제 about 페이지에 하위 라우팅 발생 시 컴포넌트를 렌더링할 자리를 명시해야한다. 이때 Outlet 컴포넌트를 사용한다.

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

function About() {
  return (
    <div>
      <div>
        <h2>여기는 About 페이지입니다.</h2>
        <p>대충 쇼핑몰 페이지라는 뜻</p>
      </div>
      <Outlet />
    </div>
  );
}

About 컴포넌트 내부에 Outlet 컴포넌트를 렌더링하면 라우터에서 인식하여 Outlet 자리에 Location 컴포넌트를 렌더링하게 된다.

 

 

 

Params

주소 경로 내부에 특정 데이터를 넣어 전달하는 것 (URL parameter, querystring)

 

url 파라미터                                                         쿼리 스트링

ID, 이름, 특정 데이터를 조회할때 사용	키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용
일반적인 변수, 상수 값들을 전달하기 용이	key, value 형태의 데이터이므로 json이나 객체 형태의 데이터를 전달하기 용이

 

useParams

만약 어떤 주소의 id 값을 가져오고 싶다면.. ex) http://asdfg.com/event/ed1 

<Route path="/event/:id" element={<eventId />}

이제 eventId 컴포넌트 내부에서 useParams Hook을 통해 추출하여 사용할 수 있다. 이 예시로는 ed1이 전달될 것이다.

import React from 'react';

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

const eventId = () => {

  let { id } = useParams();

}

return (

  <div className='wow'>

    <p>event ID는 { id }</p>

  </div>

)

export default eventId;

 

useSearchParams

쿼리 스트링을 추출하는 데 사용된다. 현재 위치에 대한 URL의 쿼리스트링을 읽고 수정할 때 사용한다.

useState와 사용법이 유사하다.

const [serchParams, setSearchParams] = useSearchParams();

searchParams는 URLSearchParams 객체이면서 쿼리스트링을 다루기 위한 다양한 메서드를 내장하고 있다.

setSearchParams는 함수의 인자에 객체와 문자열을 넣어주면 현재 url의 쿼리스트링을 변경하는 기능을 제공한다.

 

method들에 대해 살펴보자면

값을 읽어오는 메소드

1. searchParams.get(key) : 특정 key의  value를 가져옴

2. searchParams.getAll(key) : 특정 key에 해당하는 모든 value 가져옴

 

값을 변경하는 메소드

1. searchParams.set(key, value) : 전달한 key 값을 value로 설정. 기존 key에 값이 존재했다면 덮음

2. searchParams.append(key, value) : 기존 값을 변경 및 삭제 하지 않고 추가

 

searchParams 를 변경하는 메서드로 값을 변경하더라도 실제 url 에는 이 정보가 반영되지 않는다. 만일 이를 반영하고자 한다면 setSearchParams에 searchParams를 인자로 전달해주어야 한다.