[React] React Router

React에서는 한 페이지에서 이동하는 구간이 많기 때문에 이동 경로를 정의내리는 것이 중요하다.
이를 도와줄 패키지는 바로 React Router 이다.

아주아주 간단한 샘플 페이지를 만들면서 페이지 이동 처리하는 방법에 대해 알아보쟝~

하기에 앞서 먼저 Router 패키지를 설치해야한다.

// Router 설치 명령
npm install react-router-dom

그런 후 App.js에서 react-router-dom에 내제되어있는 모듈을 불러올려고 한다.

<BrowserRouter> 는 아래에 쓰일 컴포넌트를 감싸줄 부모 컴포넌트라고 생각해주면 된다.
<Routes> 는 <Route> 들을 감싸줄 컴포넌트로 Route 컴포넌트의 모음집 느낌이며, <Route> 는 페이지 경로들을 정의하는 컴포넌트다.

// App.js 전체 코드

import './App.css';
import { BrowserRouter, Routes, Route, Router } from 'react-router-dom';
import Main from './Main/Main'
import Sub from './Main/Sub'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Main />}></Route>
          <Route path='/sub' element={<Sub />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

<BrowserRouter> > <Routes> > <Route> 순으로 기억하쟈!!

App.js에서 <Route> 컴포넌트에서 path는 웹 경로 주소를 지정해주고 element는 어느 페이지로 갈지 지정해주는 속성이다.

이렇게 경로를 정해줬으면 Main 페이지와 Sub 페이지에서 react-router-dom 속성 중 <Link> 컴포넌트를 사용해서 이동할 수 있게 설정해보자.

// Main.js 전체 코드

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

const Main = (props) => {
	return (
		<>
            <h1>메인 페이지입니다.</h1>
            <Link to="/sub">  // Main -> Sub 페이지 이동
                <h3>서브 페이지로 갈까요?</h3>
            </Link>
		</>
	);
};

export default Main;

// Sub.js 전체 코드

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

const Header = (props) => {
    return (
        <>
			<h1>서브 페이지입니다.</h1>
            <Link to='/'>  // Sub -> Main 페이지 이동
			    <h3>메인 페이지로 돌아갈까요?</h3>
            </Link>
        </>
    );
};

export default Header;

<Link>의 to 속성은 App.js의 <Route> 에서 설정한 path와 일치시켜, 해당 경로로 이동하게 해줘야한다.

그럼 위 사진과 같이 경로 주소가 다름으로써 이동됐다는 것을 알 수 있다.