분류 Reactjs

React 라우터 소개

컨텐츠 정보

  • 조회 330 (작성일 )

본문

React Router는 React 앱에서 라우팅 문제를 해결하기 위해 만든 타사 라이브러리입니다. 

브라우저 히스토리 API를 감싸고 React 애플리케이션 UI를 브라우저의 URL과 동기화 하는 작업을 수행합니다.


React Router에는 React 용 react-router-dom과 React Native용 react-router-native의 두 가지 패키지가 있습니다. 

웹 응용 프로그램 만들기에 대해 배우기 때문에 react-router-dom만 설치하면 됩니다.


https://dev.to/nsebhastian/react-router-introduction-ceg?utm_source=additional_box&utm_medium=internal&utm_campaign=regular&booster_org= 


npm install react-router-dom


최소한의 탐색에 일반적으로 사용되는 3 가지 기본 React Router 구성 요소가 있으며, BrowserRouter, Route 및 Link입니다. BrowserRouter 및 Route에 대해 먼저 살펴 보겠습니다.


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

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
      <>
        <NavigationComponent />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </>
      </Router>
    )
  }
}


라우터로 가져 오는 BrowserRouter는 모든 React 구성 요소를 랩핑하는 상위 구성 요소로 작동합니다. 브라우저 요청 URL을 가로 채고 해당 경로 구성 요소와 경로를 일치 시킵니다. 따라서 브라우저 URL이 localhost:3000/about 인 경우 라우터는 해당 정보를 가져와 경로 속성이 /about 인 Route 구성 요소를 찾습니다.


component 속성을 Route에 추가하여 렌더링 대상을 결정합니다.


위의 샘플에서 정확한 속성이 기본 경로 경로 (/)에 추가됩니다. /가 없는 경로는 홈 구성 요소도 렌더링 하므로 탐색에 불일치가 발생하기 때문입니다.


세 번째 구성 요소 링크는 탐색에 사용되어 HTML의 일반 <a> 태그를 대체합니다. 이는 일반 HTML 앵커 태그가 클릭시 브라우저를 완전히 새로 고치므로 React 애플리케이션에 적합하지 않기 때문입니다. 

React 앱은 브라우저 새로 고침 없이 렌더링 된 URL, 브라우저 기록 및 구성 요소 만 업데이트하면 됩니다.


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

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}


여기서 실무 데모를 시도 할 수 있습니다.


브라우저 탐색 표시 줄의 이전 및 다음 단추를 사용하는 방법에 유의하십시오. URL은 브라우저 로드 없이 후속 탐색으로 업데이트 됩니다. 이것이 바로 React Router의 힘입니다.


동적 라우팅 만들기 


React Router를 사용하여 간단한 탐색을 만드는 방법을 보았지만 대부분의 웹 응용 프로그램에는 그보다 더 고급 기능이 필요합니다. /user/ id와 같은 것을 넣을 수 있는 동적 라우팅이 필요할 것입니다. React는 : id 값에 따라 무언가를 렌더링해야 합니다.


기존 링크도 작동하지 않을 수 있으며 새 링크로 경로 재지정해야 합니다.


또한 브라우저 URL이 기존 경로와 일치하지 않으면 404 페이지를 표시해야 합니다.


그렇기 때문에 스위치 및 리디렉션 이라는 두 가지 구성 요소에 대해 더 배워야 합니다. 스위치는 첫 번째 일치하는 경로를 렌더링 한 다음 중지하는 고유 한 구성 요소입니다. 이 예를 설명하려면


import { Route } from 'react-router'

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

위 코드에서 /about의 브라우저 URL은 세 경로 모두와 일치하므로 모두 렌더링 되고 서로 아래에 쌓입니다. 이제 스위치 구성 요소를 사용하면 React Router가 정보 구성 요소 경로를 렌더링 한 다음 중지합니다.


import {Switch, Route} from 'react-router';

<Switch>
  <Route path='/about' component={About} />
  <Route path='/:user' component={User} />
  <Route component={NoMatch} />
</Switch>;


Switch 내부의 Route 구성 요소 순서는 중요하므로 url 매개 변수 및 404 경로를 사용하여 경로를 선언하기 전에 모든 고정 경로를 먼저 선언해야 합니다.


이제 Redirect의 경우 구성 요소가 매우 간단합니다. 기존 URL을 나타내는 속성과 연결할 새 URL을 지정하는 속성 만 추가하면 됩니다.


import {Redirect} from 'react-router';

<Redirect from='/old-match' to='/will-match' />;


중첩 된 경로 


중첩 된 경로를 만들려면 부모 구성 요소 내에 다른 경로를 선언해야 합니다. 예를 들어 Users 구성 요소로 렌더링 하는 / users 경로가 있다고 가정합니다.


약간의 운동을 하자. 먼저 사용자 데이터를 저장하는 객체 배열을 만듭니다.


const users = [
  {
    id: '1',
    name: 'Nathan',
    role: 'Web Developer',
  },
  {
    id: '2',
    name: 'Johnson',
    role: 'React Developer',
  },
  {
    id: '3',
    name: 'Alex',
    role: 'Ruby Developer',
  },
];


이제 응용 프로그램에서 간단한 라우팅을 만듭니다.


class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
        <>
          <NavigationComponent />
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/users' component={Users} />
        </>
      </Router>
    );
  }
}


NavigationComponent는 응용 프로그램을 탐색하기 위한 링크 구성 요소를 작성하는 위치입니다.


class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About page</Link>
          </li>
          <li>
            <Link to='/users'>Users page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}


이제 특정 경로에서 렌더링 할 구성 요소를 만들 차례입니다. 홈 및 정보 구성 요소는 단일 div를 렌더링 하는 반면 사용자에게는 다른 링크 및 경로 구성 요소가 있습니다.

 

Users 구성 요소 내에서 / users / : id와 같이 ID별로 개별 사용자에게 중첩 된 경로가 있는 사용자 목록을 렌더링 합니다.


const Home = () => {
  return <div>This is the home page</div>;
};

const About = () => {
  return <div>This is the about page</div>;
};

const Users = () => {
  return (
    <>
      <ul>
        {users.map(({name, id}) => (
          <li key={id}>
            <Link to={`/users/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path='/users/:id' component={User} />
      <hr />
    </>
  );
};


이 코드에는 새로운 것이 없습니다. 이제 사용자 컴포넌트를 작성할 수 있습니다 :


const User = ({match}) => {
  const user = users.find((user) => user.id === match.params.id);

  return (
    <div>
      Hello! I'm {user.name} and I'm a {user.role}
    </div>
  );
};

이제 내가 말하지 않은 새로운 것이 있습니다. 컴포넌트가 특정 라우트에서 렌더링 될 때마다 컴포넌트는 React Router로부터 라우트 Props을 받습니다. 일치, 위치, 기록 등 3 가지 경로 소품이 구성 요소로 전달됩니다.


React Developer Tools를 열어서 Props을 보고 일치하는 구성 요소 경로를 강조 표시 할 수 있습니다.


Route props 


(코드 및 상자에서 여는 경우 새로운 별도의 창에서 데모를 열어 React DevTool을 활성화 할 수 있습니다)


Users 구성 요소 중첩 경로에 /:id URL 매개 변수를 추가하는 방법에 주목하십시오. 이 ID는 match.params.id 객체 속성을 통해 사용자 구성 요소로 전달됩니다. URL 매개 변수를 /:userId로 전달한 경우 match.params.userId로 전달됩니다.


이제 라우트 Props에 대해 알고 있으므로 Users 구성 요소를 약간 리팩토링 해 보겠습니다.


const Users = ({ match }) => {
  return (
    <>
      <ul>
        {users.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path={`${match.url}/:id`} component={User} />
      <hr />
    </>
  );
}


언제나 그렇듯이 작동하는 데모가 있습니다.


라우트 구성 요소에 Props 전달 


Props을 Route 컴포넌트로 전달하는 것은 일반 컴포넌트로 전달하는 것과 동일하다고 생각할 수 있습니다.


<Route path="/about" component={About} user='Jelly'/>

불행히도 React Router는 Route 구성 요소에 입력 된 소품을 구성 요소 Props으로 전달하지 않으므로 다른 방법을 사용해야 합니다.


다행히 React Router는 URL 위치가 일치 할 때 호출 할 함수를 허용하는 렌더링 속성을 제공합니다. 이 Props은 컴포넌트 Props과 동일한 경로 Props을 받습니다 :


<Route
  path="/about"
  render={props => <About {...props} admin="Bean" />}
/>

// the component
const About = props => {
  return <div>This is the about page {props.admin}</div>;
};


먼저, React Router에서 제공된 Props을 가져 와서 컴포넌트로 전달하여 필요한 경우 컴포넌트가 일치, 위치 또는 히스토리 Props을 사용할 수 있도록 합니다. 그런 다음 자신 만의 Props을 추가합니다. 위의 예는 임의의 admin props를 예로 사용합니다.


여기에서 전체 코드를 볼 수 있습니다.


이제 React Router에 대해 배웠으니 React 응용 프로그램에 구현해보십시오!