React-Router-Dom 개념

Routing 

- 라우팅은 우편배달기사가 집집마다 배달하듯이 지정된 곳에 배달해주는 것.

즉 지정된곳에 콘텐츠를 이동시켜주는것이다.

 

React-Router를 사용하는 이유

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

 

Router 종류

BrowserRouter 

: 별도의 서버 설정이 없다면 새로고침 시 404에러가 발생한다.

:큰 프로젝트에 적합하다.

:서버가 존재하고, SEO가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋다.

 

React-Router-Dom

React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다.

설치하기

yarn add react-router-dom
//ts yarn add @types/react-router-dom

 

세팅하기

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

 

 

: BrowserRouter

• history API를 활용해 history 객체를 생성한다.
• 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다

: Route

• 현재 브라우저의 location (window.href.location 정보를 가져온다) 상태에 따라 다른 element를 렌더링한다.
• Route.element: 조건이 맞을 때 렌더링할 element,
  <Element />의 형식으로 전달된다
• Route.path: 현재 path값이 url과 일치하는지 확인해 해당 url에 매칭된 element를 렌더링해준다

: Routes

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

const App = () => {
    return (
        <BrowserRouter>
            <ScrollTo />
            <Header />
            <Main>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/today' element={<Today/>} />
                    <Route path='/youtuber' element={<Youtuber />} />
                    <Route path='/search/:searchId' element={<Search />} />
                    <Route path='/video/:videoId' element={<Video />} />
                    <Route path='/channel/:channelId' element={<Channel />} />
                    <Route path='*' element={<Not />} />
                </Routes>
            </Main>
            <Footer />
        </BrowserRouter>
    )
}

이렇게 작성해야한다.