[리액트] router 사용하기

리액트 라우터 세팅하기

react-router를 사용하면 싱글 페이지 애플리케이션과 같이 페이지 깜박임이 없으면서도 주소를 가질 수 있게 됩니다.

1. import

import React from 'react';
import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom';

import 한 정보들은 다음과 같습니다.

• <BrowserRouter />: HTML5 히스토리 API를 사용하여 주소를 관리하는 라우터(해쉬뱅 모드 사용 안함)
• <Route />: 요청 경로와 렌더링할 컴포넌트를 설정한다
• <Switch />: 하위에 라우터 중 하나를 선택한다
• <Redirect />: 요청 경로를 다른 경로로 리다이렉션한다

2. load component

//사용할 컴포넌트 로드해주기
import HomePage from 'pages/HomePage'
import AboutPage from 'pages/AboutPage'
import ProductPage from 'pages/ProductPage'

사용할 컴포넌트를 로드해 줍니다.

//(선택 사항)path를 설정해줍니다.
export const ROUTE_HOME = '/';
export const ROUTE_ABOUT = '/About';
export const ROUTE_PRODUCT = '/Product';

path를 만들어줍니다. 이 부분은 선택사항입니다.

참고: 아래의 코드같이 path name을 사용할 수 있게됩니다. 물론, to={'/'} 이렇게 적어도 되긴합니다!
        → 그래서 선택사항이라는 겁니다!

import { ROUTE_HOME } from 'routes';

export default const HomeButton () => {
  return (
  	<Link to={ROUTE_HOME} className='home'> 홈으로 </Link>    
  )
}

 

3. Router 

export const AppRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path={ROUTE_HOME} exact component={HomePage} />
        <Route path={ROUTE_ABOUT} component={AboutPage} />
        <Route path={ROUTE_PRODUCT} component={ProductPage} />
        <Redirect path="*" to="/" />
      </Switch>
    </BrowserRouter>
  )
}

경로를 세팅해줍니다.

point 1. 먼저 Home으로 가는 경로를 ' / ' 입니다.
           이 경우, ' /About', '/Product' 또한 / 이 들어가기 때문에 home으로 가질 수 있습니다.

           그렇기에 확실히 ' / '으로 들어왔을때만 (' / 뒤에 아무것도 없이') Home으로 이동시켜주기 위해 exact 를 넣어줍니다.

point 2. Redirect는 '요청 경로를 다른 경로로 리다이렉션한다' 라는 것으로,
          설정해준 경로를 벗어나면 ' to=" " ' 에서 설정해준 경로로 이동합니다.
          → 즉, 여기에선 ' / ' Home으로 이동하게 됩니다.

이것이 끝입니다!

다른방법은 없을까요 ?

조금더 간단하게 관리할 수 있는 방법도 있습니다.
( 컴포넌트로드, 일일이 다설정해 줄 필요가 없어서 간편하다는 말입니다. )

React.lazy와 Suspense 를 이용해 코드분할을 통한 방법입니다.

주의
React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한 다면 Loadable Components를 추천합니다. 이는 서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드입니다.         

 

1. App.js에서 content를 넣는 부분에 라우터를 설정해줍니다.

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import routes from './routes';

import { PageSpinner } from 'components';
import NotFound from 'pages/NotFound';


<div>
  <Suspense fallback={<PageSpinner />}>
    <Switch>
      {routes.map(({ path, component }, index) => (
      	<Route exact key={index} path={path} component={component} />
      ))}
      <Route path="*" component={NotFound} />
    </Switch>
  </Suspense>
</div>

• Suspens 에 fallback prop은 컴포넌트가 로드될 동안 렌더링되는 부분입니다. ( 로딩중.... 이런거요!)
  → React element를 넘겨줄 수 있습니다.
  Suspense 컴포넌트는 lazy 컴포넌트를 감쌉니다. ( 여러개의 lazy도 감쌀 수 있습니다.)
• Switch 에서 route 들을 map돌려줍니다 (반복문) 
• 경로를 찾을 수 없을때, 이번엔 NotFound페이지로 이동시켰습니다.

2. routes폴더 안에서 index.js를 만들어줍니다.

import { lazy } from 'react';

export default [
  {
    path: '/',
    component: lazy(() => import('../components/Main')),
  },
  {
    path: [
    '/page', 
    '/page/1', 
    '/page/2', 
    ],
    component: lazy(() => import('../components/pages')),
  },
  {
    path: '/lilyProfile',
    component: lazy(() => import('../components/lilyProfile')),
  }
];

  1. React.lazy는 동적 import()를 호출하는 함수를 인자로 가집니다.
  2. 이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환해야 합니다.
     → named export는 지원하지 않습니다.!

export default와 export named의 차이가 궁금하다면? 여기를 클릭해주세요.

결론 

lazy 함수는 그 컴포넌트를 로드할때 import함으로, 한번에 모두다 import 하지 않기때문에  

 

참고 : ko.reactjs.org/docs/code-splitting.html