react - router 개념을 잡아 보자!

Routing 이란??

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

 

리액트는 SPA (Single Page Application) 방식
 - 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다.
 - 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.

 

※ 그렇다면 a태그가 있는데 왜 굳이 라우터를 따로 정의하고 사용할까?

-> SPA 사용자 경험 향상의 목적이다. 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 흔히 말하는 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인이다. 따라서 라우팅을 통해 부드러운 화면전환을 꾀하는 것이다. 

 

※ 그러면 그냥 SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면 안되는건가?

-> 다양한 문제 발생 !! 

1. 특정 페이지 즐겨찾기 등록 불가 -> 화면 전환이 되어도 url 은 고정되어 있기 때문에 내가 원하는 페이지를 특정할 수 없다.
2. 뒤로가기 불가 -> 마찬가지의 이유. 해당 SPA 하나에 url 하나이기 때문에 뒤로 가기를 누르면 이전에 보던 다른 웹사이트로 이동하게 된다.
3. 새로고침 불가 -> 이 또한 마찬가지! 새로고침을 누를 시 맨 처음의 렌더링 페이지로 이동하게 된다...내가 보던 페이지가 아닌 처음의 페이지가 나온다!

 

설치하기 

npm 

 npm i react-router-dom

yarn

 yarn add react-router-dom

 

적용하기 

import { BrowserRouter, Routes, Route } from 'react-router-dom'

BrowserRouter import 하고  최상단 <BrowserRouter>태그로 감싸기

 

import React, { Component } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './Header';

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

export default App;

 

• BrowserRouter

history API를 활용해 history 객체를 생성한다.

history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.

라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다!

 

• Route

현재 브라우저의 location 상태에 따라 다른 element를 렌더링한다

 

• Routes

. 모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다

 

Link

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

<Link to="경로">링크 이름</Link>

 

Link 컴포넌트는 라우터 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트이다.

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

function Header(props) {
    return (
        <>
            <Link to="/">
                <h1>헤더입니다.</h1>
            </Link>
        </>
    );
}

export default Header;

 

 

 

나중에 더 자세히 써보도록!!,, 오늘은 여기까지 !!

 

 

 

참고자료 

• https://velog.io/@kandy1002/React-Router-Dom-개념잡기
• https://goddaehee.tistory.com/305