소개: React 라우터

리액트 라우터란?

React는 개발자에게 전체 페이지를 새로 고치지 않고도 렌더링할 애플리케이션의 각 구성 요소를 빌드할 수 있는 기능을 제공하여 한 페이지 웹 애플리케이션을 빌드하기 위한 효율적인 솔루션입니다. React 라우터는 반응 애플리케이션의 여러 보기를 탐색하기 위한 표준 라우팅 라이브러리입니다. React Router를 사용하면 뷰 또는 페이지가 인라인으로 렌더링되어 사용자 인터페이스와 URL 간의 관계를 관리하여 다중 페이지 애플리케이션의 환상을 만듭니다. 이 튜토리얼에서는 React 웹 애플리케이션 구축에 대해 어느 정도 이해하고 있어야 합니다.

시작하기 - 설치

React Router를 시작하는 것은 기존 react 프로젝트에 npm 종속성을 설치하는 것만큼 간단합니다. 프로젝트 설정이 없는 경우 계속 진행하기 전에 Create-React App을 방문하십시오.

npm install react-router-dom

보기 설정

이 예에서 애플리케이션에는 다음 보기가 포함되어 있습니다.

// Home.js
const Home = () => {
  return 
    <div>
      <h2>Home</h2>;
      <p>Welcome to Our React Web App!</p>
    </div>
}

export default Home;

// About.js
const About = () => {
  return 
    <div>
      <h2>About</h2>;
      <p>We are pretty awesome!</p>
    </div>
}

export default About;


// Product.js
const Products = () => {
  return 
    <div>
      <h2>Products</h2>;
      <p>Buy our stuff please!</p>
   </div>
}

export default Products;


// Contact.js
const Contact = () => {
  return 
    <div>
     <h2>Contact</h2>;
     <p>For Inquiries</p>
   </div>
}

export default Contact;

라우터 및 링크

애플리케이션의 탐색 모음에서 집, 제품, 정보 및 연락처 보기 간의 경로를 설정해 보겠습니다. 링크는 url을 문자열에 포함된 값으로 지정하는 href 속성이 있는 <a> 태그를 생성합니다.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
        <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
      </div>
    </Router>
  );
}

export default App;

링크로 보기 전환

경로를 반복하여 React Router Switch 키워드와 함께 switch 문을 사용하여 렌더링할 경로를 찾습니다. 사용자의 클릭 값과 일치하는 첫 번째 값이 선택됩니다.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
         <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/products">
            <Products />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

결론

그건! 나는 이 주제를 다루는 것을 즐겼고 단순함에 놀랐고 라우팅을 포함하도록 현재 프로젝트를 리팩토링하기를 기다릴 수 없습니다. 탐색 보기를 최적화하기 위해 향후 프로젝트에서 React Router를 구현할 계획이며 이것이 시작하는 데에도 도움이 되기를 바랍니다. 필요한 것보다 더 복잡하지 않도록 프로젝트 초기에 경로를 설정하는 것이 좋습니다. 즐거운 코딩!

크레딧:
리액트 라우터https://reactrouter.com/

React 앱 만들기https://github.com/facebook/create-react-app

함으로써 배우다https://daveceddia.com/react-practice-projects/