들어가기에 앞서

[ 배경 ]

• SideBar Menu를 구현해야하는 요구사항이 있었다.
  왼쪽에 사이드바를 구현하고 클릭하는 시점에 화면이 이동되는 형태로 구현이 필요했다.
• Sidebar Menu의 경우 Component를 주입하여 개발했던 경험이 있었지만, 뒤로가기, 외부에서 해당 메뉴로 바로 진입등 url을 통한 접근이 필요한 상황이었다.
• System에 적용되어있는 Connected-React-Router를 활용하여 SideBar를 구성하면서 겪었던 내용을 정리하고자 한다.

React Router란 무엇인가

React Router는 Client Side Router이다.
React Router 공식 홈페이지에서 말하는 세가지 주요 기능이 있는데 이는 아래와 같다.

1. Subscribing and manipulating the history stack
2. Matching the url to your routes
3. Rendering a nested UI from the route matches

React Router 공식 홈페이지에 들어가면 위와 같이 설명되어 있는데 이를 풀어보면 다음과 같다.

1. History Stack을 조작할 수 있어야 한다.
2. Url과 Route를 일치시킬 수 있어야 한다.
3. 해당 Route에 맞는 UI Component를 불러올 수 있어야 한다.

1. History Stack을 조작할 수 있어야 한다.

• Dom의 Window 객체는 Histroy 객체를 통해 브라우저의 세션 기록에 접근할 수 있다.
  (우리가 일반적으로 사용하는 뒤로가기, 앞으로가기, url이동 등이 이에 포함된다.)
• History Stack이란 우리가 방문한 url 기록을 추적하기 위한 구조로 되어있다.

예를 들어보자.

위처럼 해당 경로에 들어가고 나가는 동작 모두가 History Stack이라는 공간에 남게되고, 이를 조작하여 url을 추적, 이동할 수 있게 된다.
이로 인해 내가 원하는 경로의 url로 이동 및 뒤로가기, 앞으로가기 기능을 활용할 수 있는 것이다.

자, 그럼 history Stack이 무엇인지 얼추 느낌이 왔을 것이다.
그렇다면 React Router에서는 history를 어떻게 조작할 수 있는지 보자.

import * as React from "react";
import { Routes, Route, Outlet, Link } from "react-router-dom";

export default function App() {
const history = createBrowserHistory();
  return (
    <div>
      <h1>Basic Example</h1>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </div>
  );
}

위 코드를 한번 보자.
(history는 크게 세가지가 있으나 여기에서는 browser history를 예시로 한다.)
위 코드에서 createBrowserHistory 함수를 통해 history를 생성함을 볼 수 있다.

import * as React from "react";
import { BrouserRouter, Route, Outlet, Link } from "react-router-dom";

export default function App() {

  return (
    <div>
      <h1>Basic Example</h1>
      <BrouserRouter>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </BrouserRouter>
    </div>
  );
}

이처럼 BrouserRouter 객체로 감싸게 되면 defaultProps에 자동으로 history 객체가 들어가게 된다.

history 객체에 back, forward, go등 브라우저 뒤로가기, 앞으로가기등의 기능이 구현된 것을 볼 수 있다.
(페이지 이동은 history.push(url)이렇게 이동한다.)

해당 history객체를 전달하여 각 Component에서 불러와서 사용할 수 있는 것이다.

<페이지 이동 예제>

import React from 'react';
import { withRouter } from 'react-router-dom'; 
const Home = ({history}) => {
  return (
      <button onClick = {() => {history.push('/About')}}> 
        To About 
      </button>
  );
}
export default withRouter(Home); //반드시 이렇게 감싸주어야 history 객체를 사용할 수 있다.

History를 조작하는 Hooks는 무엇이 있을까?

1. useHistory
   history를 불러오는 hooks이다.
   react router V5까지 주로 사용되었던 history 조작 hooks이다.
   history 객체 사용법과 동일하게 작동된다.
   react router V6로 넘어가면서 useNavigate로 이름이 바뀌었다.

import React from 'react';
import { useHistory } from 'react-router-dom';
const Home = () => {
  const history = useHistory();
  return (
    <button onClick={() => history.push('/About')}>
      To About
    </button>
  );
};

export default Home;

2. useNavigate
   React Router V6에서 useHistory Hooks를 대체한다.
   사용법은 기존 push메소드나 replace메소드등이 조금 직관적으로 바뀌었다.
   사용법에 대한 차이점은 크게 없다.

import React from 'react';
import { useNavigate } from 'react-router-dom'; //V6
const Home = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/About')}>
      To About
    </button>
  );
};

export default Home;

3. useLocation
   url 정보를 가져오는 hooks이다.
   보통 아래처럼 search(url 뒤에 get 파라미터)를 가져와서 파싱해서 사용한다.
   동적으로 route를 구성하는 경우 해당 route 경로를 검증 때 사용하기도 한다.

import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Home = () => {
  const { search } = useLocation();
  const { params } = queryString.parse(search);
  
  return (
    <div>
      {params}
    </div>
  );
}

export default Home;

2편에서 계속...

부족한 글 봐주셔서 감사합니다.
피드백, 지적은 항상 감사합니다.