React Router: 오늘날 우리가 웹 페이지와 상호 작용하는 방식 이해

최신 웹 페이지가 어떻게 작동하는지 궁금한 적이 있습니까? 나는 웹 페이지가 어떻게 그렇게 많은 다양한 페이지, 양식 및 정보를 저장할 수 있는지 항상 궁금했던 것을 기억합니다. 그것은 항상 나에게 거대한 도서관처럼 보였습니다. 플랫아이언 스쿨의 코딩 부트캠프에서 자바스크립트를 처음 배웠을 때 기초적인 코드를 배울 수 있다는 것은 신나는 일이라고 생각했지만 실제 웹 페이지가 어떻게 작동하는지 배우지 못하는 점에 실망했습니다. 큰 단절이 있었던 것 같습니다. "for-loop"는 내 사용자 이름으로 내 정보를 저장할 수 있는 웹사이트를 만드는 것과 어떤 관련이 있습니까? 음, 우리가 React를 배우기 전까지는 전혀 몰랐습니다. 그러나 React 및 React Router에 대해 배우기 시작하면서 기본 Javascript 및 HTML을 기반으로 복잡한 구조와 풍부한 인테리어가 있는 광대한 건물을 은유적으로 만들 수 있는 다양한 페이지가 있는 웹 사이트를 만들 수 있는 방법이 있다는 것을 알게 되었습니다. .

리액트 라우터란?

React Router는 웹 페이지와 인간의 포괄적인 상호 작용을 제공하는 프로그램입니다. 이를 강조하는 방법 중 하나는 URL 경로 일치를 사용하는 것입니다. URL 경로 일치를 이해하려면 먼저 위치를 이해해야 합니다. 시연을 위해 현재 Flatiron School에서 다른 사람들과 함께 만들고 있는 웹 사이트를 사용하겠습니다. 아직 진행중인 작업이지만 우리가 가진 것을 보여주고 싶습니다. 다음은 저희 웹사이트 홈의 사진입니다.



보시다시피 상단 부근에 "홈", "검색", "즐겨찾기"라는 단어가 있습니다. React Router가 우리에게 할 수 있는 것은 우리가 이러한 각 단어를 클릭할 수 있고 우리 웹사이트 건물의 다른 "방"으로 우리를 데려갈 수 있다는 것입니다. 즉, 웹사이트의 다른 페이지로 이동할 수 있습니다. 이 단어 중 하나를 클릭하면 URL이 변경되고 다른 페이지로 이동합니다.

React Router는 어떻게 작동합니까?

내가 언급한 것처럼 이 단어 중 하나를 클릭하면 웹사이트의 다른 페이지로 이동합니다. 하지만 후드 아래에서는 어떻게 됩니까? 이제 App.js의 일부를 살펴보겠습니다.

import React, { useEffect, useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './Header';
import NavBar from './NavBar';
import Search from './Search';
import Favorites from './Favorites';
import Home from './Home';
import '../assets/css/App.css';

//...code here...

return (
    <div className='app'>
      <Header />
      <NavBar />
      <Switch>
        <Route exact path='/search'>
          <Search />
        </Route>
        <Route exact path='/favorites'>
          <Favorites />
        </Route>
        <Route exact path='/'>
          <Home />
        </Route>
      </Switch>
    </div>
  );

먼저 react-router-dom에서 Route와 Switch를 가져옵니다. Route가 우리를 위해 하는 일은 현재 URL이 무엇인지에 따라 원하는 페이지를 렌더링하는 것입니다. 즉, URL이 '/search'로 끝나면 검색 구성 요소가 표시됩니다. 다른 구성 요소는 여전히 정확하지만 route를 통해 null로 렌더링하여 눈에 보이지 않습니다. 스위치는 URL을 변경하여 다른 구성 요소를 자유롭게 찾을 수 있게 해줍니다. '/favorites'와 같은 URL을 통해 다른 구성 요소를 호출하면 스위치 때문에 해당 구성 요소가 대신 렌더링됩니다.





그러면 페이지 상단의 표시줄에 표시되도록 하려면 어떻게 해야 합니까? NavBar를 살펴보겠습니다.

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

function NavBar() {
  return (
    <>
      <NavLink exact to='/'>
        Home
      </NavLink>
      <NavLink exact to='/search'>
        Search
      </NavLink>
      <NavLink exact to='/favorites'>
        Favorites
      </NavLink>
    </>
  );
}

NavBar 구성 요소에서 NavLink를 가져옵니다. 이를 통해 한 번에 여러 작업을 수행할 수 있습니다. 우리는 URL과 URL을 설정할 수 있을 뿐만 아니라 해당 단어를 클릭하면 새 페이지로 이동하도록 만들 수도 있습니다. 그런 다음 NavBar 구성 요소는 이러한 단어로 맨 위에 표시되는 막대를 렌더링합니다. 이제 우리는 여러 페이지의 모든 기능을 갖추고 있으며 단일 페이지 웹사이트만 렌더링했습니다! React Router는 꽤 훌륭합니다.

그렇다면 React Router를 배워야 할까요?

현재 웹 페이지가 작동하는 방식으로 React Router가 작동하는 방식을 배우는 것이 합리적입니다. 궁극적으로 매우 간단합니다. 모든 것이 여전히 구성 요소로 작동하지만 모든 구성 요소를 페이지에 깔끔하게 배치할 수 있습니다. 다재다능한 React Router에 대해 더 많이 알게 되어 기쁩니다. 여러분도 마찬가지이길 바랍니다!

출처

https://reactrouter.com/docs/en/v6/getting-started/concepts

https://v5.reactrouter.com/web/api/Switch