클라이언트측 라우팅

내 첫 블로그 게시물에 오신 것을 환영합니다.

대부분의 사람들은 자신의 생각을 다른 사람들과 공유하기 위해 블로그 게시물을 작성하지만 제 경우에는 이것이 저 자신을 위한 학습 경험에 가깝습니다.

그래서 정확한 기능을 제대로 배우지 않고 가장 최근 프로젝트 내에서 클라이언트 측 라우팅을 구현했습니다. 이것은 클라이언트 측 라우팅이 정확히 무엇인지 이 글을 읽고 있는 나 자신과 다른 사람들에게 설명하는 빠른 충돌 과정이 될 것입니다.

React와 함께 사용하는 인기 있는 플러그인은 React Router입니다. 'React Router'는 가장 널리 사용되는 클라이언트 측 라우팅 라이브러리입니다. React와 함께 사용하면 사용자가 페이지에 표시되는 다른 콘텐츠를 렌더링하는 다른 구성 요소 간에 전환할 수 있는 대화형 웹 페이지가 가능합니다.

React 라우터 가져오기의 예는 다음과 같이 index.js 페이지 내에서 앱을 래핑할 수 있습니다.

<BrowserRouter>
   <App />
</BrowserRouter>

또는 앱 페이지 내에서 직접 가져오고 구성 요소 간에 "전환"하려는 요소 주위를 래핑할 수 있습니다.

import {BrowserRouter as Switch, Router} from 'react-router-dom'

예를 들어 현재 앱에 다음과 같은 경로로 여러 가지 다른 구성 요소가 있는 경우:

/약

/홈

/양식

/사용자

'Switch', 'NavLink', 'Link 또는 Redirect'를 가져올 수 있으므로 사람들이 탐색하고 앱을 사용하여 사이트의 특정 부분을 렌더링할 수 있습니다.

<li>
  <Link to="/">Home</Link>
</li>
<li>
  <Link to="/about">About</Link>
</li>
<li>
  <Link to="/users">Users</Link>
</li>

이는 클라이언트 측 라우팅의 많은 핵심 기능 중 하나일 뿐입니다. 이것에 대해 알게 된 후, 그것은 제가 현재 사용하고 있는 모든 웹사이트를 새로운 관점에서 볼 수 있게 해주었습니다. Reddit은 내가 자주 방문하는 React를 사용하여 구축된 웹 사이트입니다. 이제는 사용할 때마다 수백만 개의 하위 레딧이 있기 때문에 거의 무한한 양의 구성 요소가 포함되어 있기 때문에 전체 웹 사이트를 코딩하는 데 엄청난 시간과 노력이 들었는지 궁금합니다.

Client Side Routing을 설명하려는 저의 초심자 시도를 읽어주셔서 감사합니다.