react-router

일반적인 웹페이지의 경우 페이지가 여러개로 구성되어있어 유저가 요청할 때마다 페이지가 새로고침되어 페이지가 로딩되는데 반해 SPA(Single Page Application) 의 경우 특성상 페이지 하나에 모든 정보가 들어간다. 하나의 페이지에 모든걸 다 보여주는 결과물이라면 상관없겠지만 주소마다 다른 결과물을 보여줘야 할 경우(라우팅) react-router 라는 써드파티 라이브러리를 사용하여 리액트에서도 간단하게 라우팅 할 수 있다.

사용법

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // BrowserRouter 호출
import './index.css';
import App from './App';

// App컴포넌트를 BrowserRouter로 감싼다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { Route } from 'react-router-dom'; // Route 호출
import './App.css';
import Lotto from './Lotto';
import Counter from './Counter';

const App = () => {
  return (
    <div>
    	// path => 주소표시줄 뒤에 올 문자열 설정
        // path="/lotto"가 path="/"와 규칙이 같기때문에
        // path="/"에 별도로 exact={true}를 추가해준다.(정확한 문자열인지 체크)
        
      <Route path="/" exact={true} component={Counter} />
      <Route path="/lotto" component={Lotto} />
    </div>
  );
};

export default App;

다른 주소로 이동시키기

일반적인 웹페이지에서는 a태그를 이용해 다른 페이지로 이동하는데 기본적으로 클릭시 해당 주소를 아예 새로 불러오게 되어 리액트의 경우 지니고 있던 상태값들이 초기화 되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 한다. 이를 방지하기 위해 a태그 기본속성을 막는 e.preventDefault()를 onClick시 호출하거나 Link컴포넌트를 사용한다. Link컴포넌트는 HTML5 History API 를 사용하여 브라우저의 주소만 바꾸고 페이지는 새로 불러오지 않는다고 한다.

사용법

Main.js

import React from 'react';
import { Link } from 'react-router-dom';	// Link 컴포넌트 호출

const Main = () => {
  return (
    <div>
      <strong>Link 컴포넌트</strong>
      <div>
        <div className="row">
        // Link 컴포넌트의 속성 to에 불러올 브라우저 주소 입력
          <Link to="/counter">댓글달기로</Link>	
        </div>
        <div className="row">
        // Link 컴포넌트의 속성 to에 불러올 브라우저 주소 입력
          <Link to="/lotto">로또페이지로</Link>  
        </div>
      </div>
    </div>
  );
};

export default Main;