[React] react-router-dom이란?

박성수·2022년 10월 2일

1. spa와 mpa

mpa : multi pages application spa : single page application으로 웹페이지가 몇개의 html파일로 이뤄져있냐에 따라 나뉜다.
이전의 html과 순수 js에서는 하나의 웹사이트 안에서도 페이지를 이동하기 위해서 기존에 만들어둔 html페이지를 참조하여 다른 페이지를 불러왔다. 이런 구조가 mpa라고 할 수 있다.

반면 spa는 단일 html로 이루어져 있다. 리액트는 단일 html로 바뀌는 부분을 계속 렌더링해서 다른페이지를 보여준다.
리액트 앱에서는 어떠한 방식으로 다른페이지를 랜더링 해 오는지 알아보자.

2. React-router-dom

리액트 앱에서 다른페이지를 렌더하기위해서 도와주는 라이브러리이다.
npx i react-router-dom이란 명령어로 해당 라이브러리를 설치하고,
다음과 같이 파일을 하나 생성한 후 다음과 같은 구조로 컴포넌트들을 위치시켜줘야한다.

import { BrowserRouter, Router, Route } from "react-router-dom"; //react-router-dom을 import해옴

const Router = ()=>{
    return (
            <BrowserRouter>
                <Routes>
                    <Route />
                </Routes>
            </BrowserRouter>
    )
};

각각의 역할을 살펴보면 <BrowserRouter> 은 페이지가 새로고침되지 않아도 페이지를 랜더링해 줄 수 있도록 해준다.
<Routes>는 Routes의 자식 Route중에서 해당하는 Route를 찾아서 화면에 렌더링해준다.
Route는Router가 찾을 규칙들을 설정해준다. path와 element를 설정해주어야하는데 path의 경로에 element요소를 렌더링 해준다.

예시로

<Route path={`/`} element={<Main />} />
<Route path ={`/sayhello`} element={<SayHello />} />

위와 같이 쓴다면
/경로(아무것도 입력하지 않은 경로)에 Mian 컴포넌트를 렌더링한다
/say라는 경로에 Sayhello라는 컴포넌트를 렌더링한다.

기본경로에서는 main이 렌더된다.

react router를 사용하기 위한 순서정리
1. react-router를 설치한다. (npm i react-router-dom)
2. router컴포넌트를 만들고 router의 구조를 잡아준다.(브라우저라우터 > 라우츠 > 라우트순)
3. router파일에 만들어둔 컴포넌트들을 Import해오고 라우트에 경로설정을 한다.
4. index파일에서 만들어둔 라우터 컴포넌트를 가져온다

3. link와 a태그의 차이

(1) Link to 사용법

만둘어둔 컴포넌트을 움직이기 위해 react에서는 link를 사용한다.

Main에서 버튼을 만들어서 sayhello로 이동해보겠다.

Link를 쓸 컴포넌트의 상단에 Link를 Import해 와야한다.

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

	 return(
        <>
            <h1>Here is Main page!!</h1>
            <button><Link to="/sayhello">클릭하세요</Link></button>
        </>
    )

메인페이지에 button을 만들고 그 안에 Link로 감싸준다. to라는 속성으로 어디로 이동할지를 참조해준다. (a의 href와 비슷하다.)

(2) Link 와 a 태그의 차이점

기본적으로 하는 역할은 둘이 비슷해다. 또한 link태그를 html에서 요소로 확인하면 a태그로 나오는 것을 알 수 있다.

하지만 가장 큰 차이점은 서버와의 통신의 유무이다.
a태그는 작용을 할 때마다 서버에서 새로운 html을 계속 요청해서 새로고침된 페이지를 가져오기때문에 비효율적으로 동작한다.
반면에 link를 사용하면 새로고침하지 않고 바뀌는 부분만 렌더링해서 훨씬 효율적으로 동작할 수 있다.

(3) navigate Hook사용하기

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

네비게이트 훅을 사용하기 위해서 마찬가지로 Import해 와야한다.

앱안에 navigate라는 변수에 navagate훅을 저장해준다.

const navigate = useNavigate();

function Main(){
    const navigate = useNavigate();
    const goToHello=()=>{
        navigate('/sayhello');
    }
    const goToBye=()=>{
        navigate('/saybye');
    }
    return(
        <>
            <h1>Here is Main page!!</h1>
            <button onClick={goToHello}>여기를 클릭하세요</button>
            <button onClick={goToBye}>여기를 클릭하세요</button>
        </>
    )
}