리액트 라우터 돔(react-router-dom) 사용하기

리액트 라우터 돔(react-router-dom)

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

 

a태그를 사용하지 않는 이유:

a태그를 사용하면, 화면이 새로 로딩이 된다.

이 때 필수적으로 발생하는 화면 깜박임이

사용자의 경험을 떨어뜨리는 요인이 되기 때문에 

라우팅으로 부드러운 화면 전환을 꾀하는 것이다.

결론:

1. a태그쓰면 화면 깜박여서 bad

2. 라우팅을 사용하면 화면이 부드러워져서 good

 

 

 

설치하는 방법

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

 

 

 

BrowserRouter

history API를 활용해 history 객체를 생성

history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에

사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장

라우팅을 진행할 컴포넌트 상위에

BrowserRouter 컴포넌트 생성 후 감싸줘야 함

 

Route

현재 브라우저의 location(window.href.location 정보를 가져온다)

상태에 따라 다른 element를 렌더링한다.
Route.element: 조건이 맞을 때 렌더링할 element,
<Element />의 형식으로 전달됨
Route.path: 현재 path값이 url과 일치하는지 확인해

해당 url에 매칭된 element를 렌더링해줌

 

Routes

모든 Route의 상위 경로에 존재해야 하며

location 변경 시 하위에 있는 모든 Route를 조회해

현재 location과 맞는 Route를 찾아줌

 

Link

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

계층 구조에 상대적

상대 경로 표현이 가능하므로, ./.. 과 같은 표현도 사용이 가능

a태그의 상위버전

 

useNavigate

특정 이벤트(onChange, onClick 등)가 발생했을 때 페이지 이동을 트리거할 수 있음

 

 

 

내가 이해한 방식

import와 export.

import와 export로

데이터를 주고받는 것은전화로 소식을 주고받는 것

같다는 생각이 들었다.

왜냐하면,전화도 한 명이 받지 않으면 통화할 수 없듯이,

한 쪽만 import하거나, 한 쪽만 export 한다고

데이터가 전달되는건 아니기 때문이다.

 

2. 

<BrowserRouter>
      <Routes>

          {/*  첫 페이지 */}

        <Route path="/" element={<Home />} /> 

          {/*  Dex 페이지 */}
        <Route path="/dex" element={<Dex />} />

          {/*  Dashboard  페이지 */}
        <Route path="/Dashboard" element={<Dashboard />} />

          {/*  PockemonCard  페이지 */}
        <Route path="/PockemonCard" element={<PockemonCard />} />

          {/*  PockemonList  페이지 */}
        <Route path="/PockemonList" element={<PockemonList />} />
      </Routes>
    </BrowserRouter>

 

→ 해석

첫 페이지에 element는 Home이다.

말 그대로(?) 진짜 처음으로 뜨는 창이다.

 

두번째부터는 yarn dev 입력해서 나오는

로컬 페이지 주소 바로 뒤에 Route path를 입력하면

나온다.

엘리먼트들은 내가 만든 컴포넌트이다.

컴포넌트를 변수로(?) 사용한 것이다.

그니까,, style-component처럼 사용한 것이다.

 

 

 

Route, Routes, BrowseRouter...

솔직히 아직 잘 모르겠다. 그냥 모르겠다.

내일 좀 더 찾아봐야겠다..