[React/리액트] Router 설정하기

https://reactrouter.com/en/main

Home v6.24.0 | React Router

---

route 와 페이지 이동

라우팅

라우팅은 네트워크에서 경로를 선택하는 프로세스이다.

주소와 상세 정보를 바탕으로 데이터나 메세지를 다른 네트워크로 전달하는 모든 과정을 의미한다.

클라이언트에서의 입장과 경로를 선택한다는 것에 초점을 둔다면, 주소에 요청이 들어왔을 경우 각 주소에 맞는 값들을 건네주고 화면을 렌더링해주는 것이다. 

 

리액트에서는 router를 통하여 페이지 이동을 처리할 수 있다. 

react-rotuer-dom 설치 및 세팅하기

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

명령어를 통하여 router 설정에 필요한 라이브러리를 설치한다.

BrowserRouter 방식

먼저 BrowserRouter 를 index.js, main.jsx 파일 최상단 혹은 App.jsx 파일 최상단에 감싸준다.

import './App.css';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    
    </BrowserRouter>  
  );
}

export default App;

 

 

이후 라우트 경로를 설정해준다. route 폴더에 route.jsx 파일을 생성하여 주소들만 분리하여 관리해보자.

import { Route, Routes } from "react-router";
import Main from "../Pages/Main/Main";
import MyPage from "../Pages/MyPage/MyPage";

const Router = () => {
  return(
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/mypage" element={<MyPage/>} />
    </Routes>
  );
}
export default Router;

 

이 Router 컴포넌트를 BrowserRouter 안에 작성해주면 된다. 

import './App.css';
import Router from './router/Router';
import { BrowserRouter} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  )
}

export default App;

 

BrowserRotuer

historyAPI 를 이용한다. 사용자가 방문한 url을 stack 형식으로 기록해둔다.

 

Routes

여러 Route들 중 현재 주소에 맞는 Route를 찾아낸다.

 

Route

주소와 해당 주소에서 보일 페이지를 찾아서 렌더링한다. 

---

RouterProvider 방식

먼저  Router 파일을 다음과 같이 변경한다.

import Main from "../Pages/Main/Main";
import MyPage from "../Pages/MyPage/MyPage";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    children:[
      {
        path: '/',
        element: <Main />
      },
      {
        path: '/mypage',
        element: <MyPage />
      },
    ]
  }
]);
export default router;

컴포넌트를 작성하지 않고, 각각의 주소와 대응하는 페이지를 createBrowserRouter로 묶어준다.

 

import './App.css';
import Router from './router/Router';
import { RouterProvider } from 'react-router-dom';

function App() {
  return (
    <RouterProvider router={Router()}/>
  )
}

export default App;

이후 위와 같이 RouterProvider를 사용할 수 있다. 

 

react-router 에서는 보다 최신 방식인 RouterProvider 방식을 권장하고 있다. 

 

Link

페이지 이동을 도와주는 컴포넌트다.

<Link to='이동할 페이지'> 내용 </Link>

a 태그의 형식으로 나타나지만 자체적으로 컴포넌트의 상태 유지, 화면 전체의 리렌더링 방지 등의 기능을 가져 a 태그의 상위 버전으로 볼 수 있다. 

 

useNavigate

Router에서 지원하는 Hook으로 지정한 경로로 페이지를 이동할 수 있게 하는 함수이다. 

import { useNavigate } from 'react-router-dom'

function MyPage () {
  const navigate = useNavigate();

  const handleNavigate = () =>{
    navigate('/');
  };

  return(
    <>
      <button
        onClick={() => {
          handleNavigate();
        }}
      >
        메인 페이지로 이동
      </button>
    </>
  )
}
export default MyPage;

다음과 같이 이벤트 발생과 함께 처리할 수 있다. 

 

 state를 통하여 데이터를 전달해 줄 수도 있다. 

navigate('주소', {state : { key값: value값 } });

 

useLocation

이동된 페이지에서 useNavigate로 전달한 state 값은 useLocation을 통하여 받을 수 있다.

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

const location = useLocation();
const value = location.state
const value2 = location.state.key값

 

//MyPage.jsx
const navigate = useNavigate();

const handleNavigate = () =>{
  navigate('/', {state: {'num': 2}});
};

//Main.jsx
const location = useLocation();
const key = location.state;
const value = location.state.num;

console.log(key); //{'num', 2}
console.log(value); //2

 

useParams

현재 경로에 있는 파라미터 값을 가져올 수 있다. 

path: 'product/:id',
element: <Product />

route를 설정할 때 다음과 같이 path에 :param 값을 지정할 수 있다.  

 

const param = useParams();
console.log(param); //{id: 1}

다음과 같이 객체의 형식으로 값이 추출된다. 

useParams를 통하여 하나의 페이지를 재사용하여 각 id에 맞는 값들을 렌더링할 수 있다. 

 

useSearchParams

https://pissssssu.tistory.com/manage/newpost/33?type=post&returnURL=ENTRY

해당 주소에서 물음표 뒷부분을 쿼리스트링 이라 부른다. 

쿼리스트링을 통하여 경로에 추가적인 조건을 부가할 수 있다. 

 

const [searchParams, setSearchParams] = useSearchParams();

다음과 같이 searchParams 객체를 생성할 수 있다. 

쿼리스트링을 다루는 여러가지 메소드를 제송한다.

 

const initKeyword = searchParams.get('keyword');

get 메소드를 통하여 쿼리 문자열에 해당하는 값을 불러올 수 있다. 

 

const [searchParams, setSearchParams] = useSearchParams();
const initKeyword = searchParams.get('keyword');
const [keyword, setKeyword] = useState(initKeyword || '');
const questions = getQuestions(initKeyword || '');

const handleSubmit = (e) => {
  e.preventDefault();
  setSearchParams(
    keyword
      ?{
        keyword,
      } 
      :{

      }
  );
};

<form className={searchBarStyles.form} onSubmit={handleSubmit}>
  <input
    name="keyword"
    value={keyword}
    placeholder="검색으로 질문 찾기"
    onChange={handleKeywordChange}
  />
  .
  .
  .

검색 기능 코드의 일부이다. 

input 태그의 값을 입력할 때마다 value 값이 갱신되며, 제출을 할 경우 쿼리 문자열의 값으로 설정할 수 있다. 

이후 화면이 다시 렌더링이 되어 get 메소드를 통해 새롭게 변경된 쿼리값을 읽어 데이터를 갱신할 수 있다.