React - Route V6

React에서는 어떻게 페이지를 전환할까

React 환경이 아닌 HTML, javascript 환경에서는 페이지를 전환할때 a태그를 사용하고 페이지의 수만큼 HTML 파일이 존재한다.
그러나 React에서는 하나의 HTML파일을 통해 SPA를 구현하기때문에 a태그가 아닌 Routing을 통한 방법으로 페이지를 전환한다.

Routing?

Routing이란 파일 경로가 아닌 URL주소를 통해 서로 다른 화면을 보여주는 것이다.
React 자체에는 라우팅을 위한 기능이 존재하지 않기때문에 라이브러리를 설치해야 사용이 가능하다.

React에서 라우팅을 위해 가장 많이 사용하는 라이브러리는 React-router 라는 라이브러리이다.

React Router 준비하기

1. React Router 설치

//npm
$ npm install react-router-dom@6

//yarn
$ yarn add react-router-dom@6

2. Router 컴포넌트 구현

Router Version 6

//Router.js @6
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Main from './Main';
function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}
export default Router;

Router Version 5

//Router.js @5
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './Login';
import Main from './Main';
function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={<Login />} />
        <Route path="/main" component={<Main />} />
      </Switch>
    </BrowserRouter>
  );
}
export default Router;

//index.js
ReactDOM.render(<Router />, document.getElementById('root'));

다음과 같이 Router 컴포넌트를 구현하여 index.js파일의 ReactDOM.render함수에 컴포넌트를 App컴포넌트대신 입력한다.

5 버전과 차이점

• 기존의 5버전에서는 Routes컴포넌트가 아닌 Switch컴포넌트를사용했다.
• Route 컴포넌트 내에서 보여줄 컴포넌트를 입력할때는 6버전부터 component 프로퍼티가 element 컴포넌트로 대체되었다.

3. Route 이동하기

Route에서 페이지를 이동하는 방법은 두 가지가 있다.

1. Link 컴포넌트 사용하기
2. useNavigate Hook 사용하기

3.1 Link 컴포넌트 사용

import React from 'react';
import { Link } from 'react-router-dom';
function Login() {
  return (
    <div>
      <h1>Login Page</h1>
      <Link to="/main">메인 페이지로</Link>
    </div>
  );
}
export default Login;

• Link 컴포넌트는 HTML DOM에서 a태그로 변환된다.
• to 프로퍼티에 변환을 원하는 링크를 작성한다.
• 클릭시 바로 URL 이동을 원하는 로직에 사용

3.2 useNavigate Hook 사용

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

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

  function goToLogin() {
    navigate('/login');
  }
  return (
    <div>
      <h1>Main Page</h1>
      <button onClick={goToLogin}>로그인 페이지로</button>
    </div>
  );
}
export default Main;

• useNavigate Hook import
• useNavigate 함수를 반환하는 navigate 라는 변수를 선언한다.
• navigate의 인자로 Router.js에 설정한 path를 넘겨주면 해당 함수가 실행될때 경로로 이동한다.
• URL이동전에 처리해야할 로직이 있는경우 활용

기존에 가볍게 익혔던 5버전과 다른점이 많이 느껴진다. 이전에는 App컴포넌트를 그대로 사용하면서 Switch컴포넌트를 통해 라우팅을 하였는데 Router컴포넌트를 직접 index.js에 렌더링해 관리하는것이 더욱 효율적인 방법이라고 생각된다.