React 라우터 소개

React에는 특정 URL에 연결한 다음 표시되는 URL에 따라 구성 요소를 표시하거나 숨길 수 있는 라우팅 라이브러리(React Router)가 있습니다. 다음은 이 편리한 도구를 사용하는 방법에 대한 빠른 가이드입니다.

React 라우터 설치

React Router를 설치하려면 터미널에서 다음을 실행하십시오.
npm install react-router-dom

React 라우터 사용

앱에서 경로 구현을 시작하려면 BrowserRouter 에서 Route 및 react-router-dom를 가져와야 합니다. React Router를 사용할 파일의 맨 위에 다음 코드 줄을 추가합니다.
import { BrowserRouter as Router, Route } from 'react-router-dom';
참고: BrowserRouter 이름이 Router 로 바뀌는 것이 일반적입니다. 위의 코드 줄은 별칭을 만드는 방법입니다. 이제 Router 를 볼 때마다 BrowserRouter 를 참조합니다.
Router는 애플리케이션 라우팅의 기본 구성 요소이며 여기에서 React Router가 사용되는 방식을 선언합니다.

이 구성 요소 내에 중첩된 구성 요소는 Route이므로 다음과 같이 보일 것입니다.

ReactDOM.render((
  <Router>
    <Route path='/' component={Home} />
  </Router>),
  document.getElementById('root')
);

Route 구성 요소에는 path 및 component 라는 두 개의 props(속성)가 있습니다. 이 행에서 말하는 것은 URL이 경로('/')와 일치할 때 앱이 Home 에 대해 지정된 구성 요소를 렌더링한다는 것입니다.

다중 경로

아마도 우리 앱에는 여러 경로가 있을 것입니다. Router 구성 요소는 하나의 자식 요소만 가질 수 있으므로 이 문제를 해결하기 위해 모든 Route 구성 요소를 <div> 또는 <> 태그 내에 배치할 수 있습니다. 이와 같이:

ReactDOM.render((
  <Router>
    <div>
      <Route path='/' component={Home} />
      <Route exact path='/about' component={About} />
    </div>
  </Router>,
  document.getElementById('root')
);

보시다시피 About 구성 요소의 경로는 exact path 대신 path 를 사용합니다. 이것은 자명하지만 경로의 일부가 아닌 전체 경로와 경로가 일치할 때만 구성 요소가 렌더링되도록 하기 위해 이것을 사용합니다. 항상 Home 구성 요소 렌더링에 문제가 있을 수 있으므로 이 경우 exact path도 만들어야 합니다.

이제 URL 경로를 '/'로 변경하면 Home 컴포넌트가 보일 것이고, 경로가 '/about'과 일치하도록 변경되면 About 컴포넌트가 렌더링되어야 합니다!

이것은 정말 빙산의 일각에 불과합니다. React Router에 대해 더 자세히 알아보려면check out this awesome site.