Router

라우팅이란?

웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 따라 그에 해당하는 페이지를 보여주는것을 의미한다.

리엑트 라우터 적용 및 사용법

1. 라이브러리 설치

터미널에 해당 명령어를 입력하고 router를 설치한다

npm i react-router-dom

설치한 react 프로젝트 디렉토리를 열러 package.json 파일에 “dependencies”중 “react-router-dom”이 있는지 확인한다.

2.페이지 컴포넌트 만들기

리엑트 라우터를 통해 여러 페이지로 구성된 웹을 만들기 위해 각 페이지에서 사용할 컴포넌트를 만든다.

src/pages/Home.js

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>가장 먼저 보여지는 페이지입니다.</p>
    </div>
  );
};

export default Home;

src/pages/About.js

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

export default About;

3. Rounte컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

사용자가 설정한 주소 경로에 따라 원하는 컴포넌트를 보여주기 위해 Route 라는 컴포넌트를 통해 라우트 설정을 해준다.

Route 컴포넌트는 다음과 같이 사용한다.

<Route path="주소입력" element={<컴포넌트 명/>}/>

그리고, Route 컴포넌트는 Routes 컴포넌트 내부에 사용되어야 한다.

src/App.js

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';

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

Link컴포넌트를 이용해 다른페이지로 이동하는 링크 보여주기

기존 웹페이지에서 원래 링크를 보여줄때 a태그를 사용하는데 React라우터를 사용하는 프로젝트에서 a태그를 바로 사용하면 안된다. 왜냐하면 a태그를 클릭하여 페이지를 이동할 때 브라우저는 페이지를 새로 불러오기 때문이다.

따라서 a태그가 아닌 Link 컴포넌트를 사용해서 링크를 걸어준다

a태그가 아닌 Link컴포넌트를 사용하는 이유는 a태그의 기본 속성은 페이지를 이동시키면서 페이지를 아예 새로 불러오게 되면서 리액트 앱이 가지고있는 상태들 및 렌더링된 컴포넌트들이 사라지고 새로 랜더링되기 때문이다. 하지만 Link컴포넌트를 사용하게되면 브라우저의 주소만 바꿀 뿐, 페이지를 새로불러오지 않는다.