React 의 페이지 이동을 위한 리액트 라우터로 이해하기

 

라우팅이란  사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다.

 

이때 SPA 즉 Single Page Application 을 기반으로 한 화면 이동(전환)을 하는데.

 

SPA란 하나의 페이지로 모든 화면을 표시한다는 개념을 가지고 있습니다.

 

 

리액트 라우터의 경우 기본적으로 REACT에 깔려있는것이 아니라 따로 설치를 해주어야 합니다.

 

터미널에 들어가 리엑트 패키지가 설치되어있는 폴더로 이동합니다.

 

그곳에서 아래의 커맨드를 입력해 줍니다.

yarn add react-router-dom

파일을 다 받고 나서 package.json 폴더에

현재 22.10월 기준으로 react-router-dom 의 파일의 깔려있다면 성공입니다.

 

안깔려있는 react 파일들에 json 폴더에 들어가보면

애초에 react-router-dom 은 없는것을 확인할 수 있습니다.

 

해당 패키지가 다운받아진 것을 확인했으면 간단한 이동을 연습해볼건데요!

 

폴더를 만들고 이동할 수 있는 파일들을 만들어주세요!

여기서 중요한데 index.js 파일의 코드부터 바꿔줘야 한다고 해요.

바뀌기전 우리가 평소에 쓰는 index.js 코드

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이게 우리가 react를 쓰면서 꾸준히 쓰는 코드인데 이 코드가 어떻게 바뀌냐면

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

그리고 심지어 여기서 <React.StrictMode> 를 빼도 된다고 하는데 왜 이렇게 index.js의 코드구조를 바꾸는 지에 대해서는 아직 저도 확실히는 모르겠어서 그냥 아 react router dom 을 쓸때는 index.js 구조도 바꿔줘야 하는구나 외우려구요!

 

 

세팅이 끝나면 App.js파일에서 Router-dom 의 핵심 기능을 이용할 것입니다!

App.js

import './App.css';
import About from './pages/About';
import Home from './pages/Home';
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

App파일의 내부 코드를 살펴봅시다.

못보던 BrowserRouter as Router,Route,Routes 를 react-router-dom 으로부터 import 를 했습니다

 

그리고 import 한것들 바로 return 문에서

<Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
      </Routes>
    </Router>

Router로 가장 바깥을 감싸고 Routes로 그 다음 마지막으로 path를 설정할 때  Route 를 이용합니다.

Route 내부를 살펴보면 path="/" 의 경로가 설정되어 있죠? 이건

 

웹에서 주소를 봤을때 기본 주소 뒤에 붙은 값들이라고 보시면 돼요! 말그 대로 경로죠!

아 그리고 이러한 도메인의 경로의 주소는 대문자, 소문자를 구분하지 않는다고 하니까 꼭 참고하세요.

 

마지막으로 element 안의 값들은 위에서 import 한

이 값들과 이동하고자 하는 페이지의 주소를 같게 넣어주시면 돼요!

 

그러면 이동하려는 페이지를 한번 만들어 볼까요?

 

About.js

import { Link } from "react-router-dom";

const About = () => {
    return (
        <div>
            <h1>소개</h1>
            <p>리액트 라우터를 사용해 보는 프로젝트 입니다.</p>
            <Link to="/">홈</Link>

        </div>
    )
}
export default About;

Home.js

import { Link } from "react-router-dom";

const Home = () => {
    return (
        <div>
            <h1>여기가 홈 입니다.</h1>
            <p>가장 먼저 보여지는 페이지 입니다.</p>
            <Link to="/about">소개</Link>
        </div>
    )
}
export default Home;

 

코드를 보시면 각 페이지 마다 Link 를 react-router-dom에서 import 해온 걸 볼 수 있습니다.

그리고 홈에서 About 페이지로 Link를 걸어뒀고 About에서 Home으로 Link를 걸어뒀는데

 

아래의 영상은 각 페이지를 이동하는 과정과 뒤에 주소를 간단히 봐주시면 이해하시기 좋을것 같아요!

 

 

Link 컴포넌트

 

여기서 한가지 더 챙겨가면 좋을 개념이 있습니다. 바로 위에서 썼던 Link 개념인데요

 

Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크를 보여주는 방법 입니다.

웹 페이지에서는 원래 링크를 보여 줄 때 a 태그를 사용하는데 리액트 라우터를 사용하는 프로젝트에서는 a태그를 바로 사용하면 안된다고 하네요.

 

a태그를 클릭하여 페이지를 이동할 때 새로운 페이지를 만들지 않고 SPA 즉 Single Page Application으 방식으로 웹을 구성하기 때문에 새 패이지 이동을 막기 위해 a 태그를 바로 사용하면 안됩니다.

 

Link 컴포넌트 역시 a태그를 사용하기 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있습니다.