개념정리/React

react-router-dom

과부하가보자구 2023. 12. 3. 16:48

Routing

라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. 

React-Router를 사용하는 이유

SPA 사용자 경험을 향상시키기 위함이 가장 큰 이유인듯하다.

Router Dom

Router Dom이란 URL의 링크에 따라 Component를 생성해주는 것이다.

 

SPA(single page application)인 React에서 하나의 URL 링크로 사용자에게 페이지를 보여줄 수 있다. 하지만 사용자가 특정 페이지로 이동하고 싶지만, 그럴수 없는데 이때 Router Dom을 사용하는 것이다.

 

하나의 URL로써 SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면

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

각종 문제가 발생할 수 있다.

Router의 종류

HashRouter

BrowserRouter

React-Router-Dom

Router에 내장된 컴포넌트 종류

BrowserRouter

URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해준다.

Switch

Route들을 Switch로 모두 감싸서 사용 ➡️ V5까지의 사용방법으로 V6로 업데이트 된 후 Switch가 Routes로 변경됨!!!

 

Route로 생성된 자식컴포넌트 중 매칭되는 첫번째 Route를 렌더링해준다.

 

보통 메인 Route의 url경로를 "/"로 지정하고 다른 Route에는 "/detail", "/login" 이런식으로 지정하게 되는데, 만약 Switch를 사용하지 않으면 그냥 메인페이지에 가기 위하여 "/" 경로를 접속했늗네 "/"가 포함된 "/detail", "/login" 컴포넌트들이 다 렌더링 되는 경우를 보게 된다.

Route

컴포넌트에 path 속성을 이용하여 원하는 url를 지정합니다.

그 url에 접속하면 해당 컴포넌트만 렌더링된다. 즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있다.

Link

'a'요소와 비슷한 개념으로 지정한 url로 이동이 되게끔 해준다. 페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날라가게 된다.

 

Routes는 URL 주소의 바구니이고 Route는 URL 입니다. 

react-router-dom으로 import하여 사용하고자 하는 컴포넌트 사용하기

import { BrowserRouter } from "react-router-dom";

 

 

입력하여, react-router-dom에 내장된 BrowserRouter 컴포넌트를 App컴포넌트를 감쌉니다.

❓Routes와 Switch의 차이❓

 

✔️React Router Dom V5 → V6으로 버전 업그레이드가 되면서 Switch를 사용할 수 없게 됨

 

❓Route의 element와 component의 차이❓

 

✔️React Router Dom V5 → V6으로 버전 업그레이드가 되면서 추가된 것

 

component속성

  • React Router v4 및 v5에서 사용되는 속성
  • 특정 경로에 대한 컴포넌트를 지정
import MyComponent from './MyComponent';

<Route path="/example" component={MyComponent} />

 

component 방식 변경 (component={COM} 및 render={() => <h1>Hello<h1/>} 삭제)

element속성

  • React Router v6에서 새롭게 추가된 속성
  • JSX나 React 요소를 직접 렌더링
import MyComponent from './MyComponent';

<Route path="/example" element={<MyComponent />} />

 

 

✔️기본적으로 동일한 결과를 얻을 수 있다. element를 사용하면 JSX를 직접 제공할 수 있으며, component를 사용하면 해당 경로에 대한 컴포넌트를 지정할 수 있다. React Router v6에서는 element가 더 일반적으로 사용되며, 더 자세한 제어를 제공한다.

 

❓Link의 to와 Route의 path차이❓

 

React Router 라이브러리에서 사용되는 두 가지 다른 컴포넌트이다.

✔️<Link to=" ">: to의 값으로 이동하고자 하는 경로를 작성하기
--> <Link> 컴포넌트는 사용자가 특정 경로로 이동할 수 있도록 하는 링크를 생성하는 데 사용된다.

✔️<Route path=" " element={ }>: path로 이동할 경로를 넣어주고  element로는 보여줄 컴포넌트 또는 HTML태그를 작성하면 된다.
--> <Route> 컴포넌트는 특정 경로에 대한 컴포넌트를 렌더링하는 데 사용된다. 주어진 경로에 대한 라우팅 정보를 설정하고 해당 경로에 대해 특정 컴포넌트를 렌더링하도록 한다.

<Link>는 사용자에게 네비게이션을 제공하는 데 사용되고, <Route>는 어떤 컴포넌트가 특정 경로에 렌더링되어야 하는지를 지정하는 데 사용된다.

 

 

 

🔗참고🔗

https://velog.io/@hoon_dev/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0Route-Link-Switch-5

 

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript