[React.JS] React Router

React Router

React와 같이 단일 페이지 애플리케이션(Single Page Application)에서 React router를 통해 새로고침이나 깜빡임 없이 사용자가 원하는 페이지를 탐색할 수 있도록 도와주는 라이브러리입니다. 비록 페이스북에서 제작한 공식 라이브러리는 아니지만 가장 많이 사용되고 있는 라이브러리입니다. https://github.com/ReactTraining/react-router

리액트 라우터 사용

리액트 라우터를 사용하기 위해

npm 또는 yarn 를 통해 react-router-dom를 설치합니다.

1 2

$ yarn add react-router-dom $ npm install react-router-dom

cs

리액트 라우터 컴포넌트

리액트 라우터 컴포넌트에는 다양한 컴포넌트가 있지만 주로 BrowserRouter, Router, Link를 사용하고 있습니다.

• BrowserRouter는 Router, Link 등 여러 컴포넌트를 포함하고 있는 react-router의 최상위 컴포넌트입니다.
• Route를 경로기반으로 어떤 컴포넌트를 사용하는지 알려주는 컴포넌트입니다.
• Link는 어떤 컴포넌트로 이동할지 지정하기 위한 컴포넌트입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// App.js import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import { Home, List } from './components/App';   function App() {   return (     <Router>       <Route exact path="/" component={Home} />       <Route path="/list" component={List} />     </Router>     ); }   export default App; Colored by Color Scripter

cs

위의 코드처럼 컴포넌트를 BrowserRouter(as Router)로 감싸주었습니다. Router 안에 Route를 사용했습니다.

Route의 path에 경로 입력하고 component에 입력한 경로에 노출되길 원하는 컴포넌트를 넣어주었습니다.

여기서 exact는 무엇일까요? Route에 exact를 사용하면 입력된 경로와 매칭 되는 경로로 이동하게 됩니다.

그럼 왜 exact 를 사용할까요? 위의 코드를 기준으로 URL에 '/'를 입력하면 '/'를 포함하는 컴포넌트 즉 '/', '/list'에 해당하는 컴포넌트 모두 노출됩니다.

즉, exact를 사용하면 경로가 중첩되는것을 방지할 수 있습니다.

이제 Link 컴포넌트를 사용하여 클릭 이벤트가 발생했을때 원하는 컴포넌트로 이동되도록 설정합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// components/App.js import React from 'react'; import { Link } from "react-router-dom";   export const Home = () => {   return (     <div>       React Home       <Link to="/list">show List </Link>     </div>   ) };   export const List = () => {   return (     <div>       <ul>         <li>list 1</li>         <li>list 2</li>       </ul>       <Link to="/">back to the Home </Link>     </div>   ) }   export default {   Home,   List, }; Colored by Color Scripter

cs

Link 컴포넌트의 to에 이동하길 원하는 path를 넣어줍니다. Home 컴포넌트의 Link는 '/list'로 이동하도록 설정했고, List 컴포넌트의 Link는 '/' Home 컴포넌트로 이동하도록 설정했습니다.

결론

자 이제 완성된 프로젝트를 확인해보겠습니다.

아래 이미지를 보시면 버튼을 클릭할때마다 URL이 변하고 이에 따라 노출되는 컴포넌트가 변경됩니다.

아래 이미지는 exact 를 적용한 화면입니다.

URL과 화면변화를 확인하면 URL에 따라 다른 컴포넌트가 노출되는 것을 확인할 수 있습니다.

1. exact 적용

아래의 이미지는 exact 를 적용하지 않은 화면입니다.

URL을 보면 '/' 과 '/list' 모두 Home 컴포넌트가 노출되는 것을 확인할 수 있습니다.

2. exact 미적용

간단한 예제를 통해 리액트 라우터에 대해 알아보았습니다.

더 많은 API는 https://reacttraining.com/react-router에서 확인할 수 있습니다.

위 예제 소스코드는 https://github.com/oyg0420/react-router에서 확인할 수 있습니다.

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음