React Router dom의 hooks

리액트 라우터(React Router)는 컴포넌트들 안에서부터 라우터의 state에 접근하거나 화면이동(navigation)을 수행하게 해주는 여러 hooks를 가지고 있다.

❗ react-router-dom 5.1v 부터 hooks들이 지원됨

---

👆 useHistory

• history 객체이다.
• 리액트 라우터에서 화면이동을 할 때 항상 history, location, match 라는 객체에 필요한 정보들을 보내게 되어있으며, history객체는 이 중 하나이다.
• history 객체는 location, createHref, push, replace, go, goBack, goForward, block, listen 라우터의 state를 가지고 있다. (화면이동하는 데 사용되는 함수들)
  ex) goBack() 함수를 사용하면 이전 페이지로 이동한다. 새로고침이 되지 않는다.

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

const Home = () => {
  let history = useHistory();
  // useHistory hook을 history라는 변수에 담아준다
 
  return (
    <div onClick={() => history.push('/cart')}> button </div>
                        // push 안에 특정 url 경로를 넣는다
  );
};

export default Home;

• A 페이지에서 B 페이지로 이동하면서 값을 전달하고 싶을 때, history.push()로 props를 넘겨주는 방법
  • pathname, search, state 등의 키와 값을 함께 전달할 수 있다.

const history = useHistory();
history.push({
            pathname: '/cart',
            state: { userInfo: userInfo },
          });

👉 이동한 페이지에서 props를 불러오는 방법은, useLocation을 사용한다

import {useLocation} from "react-router";

const location = useLocation();
const userInfo = location.state.userInfo;

---

👆 useLocation

• useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks.
• useLocation hooks는 defaultProps가 하나인 location 객체를 대체 하는 react-router-dom hooks 이다.

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

const Cart = () => {
  const location = useLocation();    // location 변수에location 객체 저장
  console.log(location);
 
  return (
    <></>
  );
}

export default Cart;

👆 useParams

• useParams는 useLocation과 유사한 hooks이다. 왜냐하면 useLocation은 쿼리스트링 정보(search 객체)를 얻는데 유용하다고 하면, useParams는 path parameter의 정보를 얻을 수 있는 hooks이다.
• useParams를 사용하기 위해서 동적 라우팅 설정을 해주어야 한다.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const Detail = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/home/:id' component={Home} />
        {/* id라는 동적 라우팅값을 걸어주었다. */}
      </Switch>
    </BrowserRouter>
  );
};

export default Detail;

❗ : (콜론)을 이용하여 위와 같이 설계해놓으면, /home/ 뒤에 1이 오든, 2가 오든, 혹은 문자열이 오든 상관없이 라우팅이 정상 작동된다.

이제 Home 컴포넌트에서 path parameter ( 동적 라우팅 값 )을 읽어올 수 있다.

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

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
 
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
 
  return (
    <></>
  );
};

export default Home;

useParams hooks는 글 상세조회, 유저 상세조회와 같은 API를 이용해야 할때 고유값을 잘 관리할 수 있으며, 활용하기 쉽다.