[02] React Tutorial-React Router

이번시간에는 react tutorial에서 페이지간 이동, react-router에 대해 학습하는 시간을 기록하고자 한다.

시작하기 전에 react-route를 위해 필요한 모듈의 설치가 필요하다. 아래의 명령어를 통해 설치를 진행하자

$ npm install react-router
$ npm install react-router-dom

설치가 잘 되었는지 package.json 파일을 확인해본다.

모듈의 설치가 완료되었다면, src 폴더 안에 폴더를 몇 가지 생성한다.
my-app/src/components
my-app/src/config
my-app/src/pages

생성 후 my-app/src/config 폴더 안에 page-route.jsx 파일을 생성한다. 그리고 파일에 route를 정의한다.

여기에서는 이동할 페이지의 주소를 설정하고 보여줄 화면의 component를 설정해준다.
그리고 기본 페이지를 Redirect를 통해 Home화면으로 설정해줄 것이다.

my-app/src/config/page-route.jsx

// 이 파일에서는 router를 정의합니다
// react-router 모둘을 import 해옵니다
// 그 다음 라우트를 할 page를 src/pages에 생성합니다
// 생성한 page를 import 해옵니다
import React from 'react';
import { Redirect } from 'react-router';

import Home from '../pages/home.jsx';
import About from '../pages/about.jsx';
import Contact from '../pages/contact.jsx';

// routes '배열'을 정의한다
const routes = [
  {
    // localhost3000번에서 아무것도 입력이 안된 초기 페이지는 home으로 설정
    path: '/',
    exact: true,
    component: () => <Redirect to="/home" />,
  },
  {
    path: '/home',
    component: () => <Home />,
  },
  {
    path: '/about',
    component: () => <About />,
  },
  {
    path: '/contact',
    component: () => <Contact />,
  },
];

export default routes;
// 이 component를 exports 해준다

// 여기까지 이렇게 route 파일을 만들어줬다

완료 되었다면, 이제 my-app/src/pages에서 클릭시 하단에 비춰질 화면들에 대해 component 파일을 생성한다.
home.jsx about.jsx contact.jsx 3개의 파일을 생성 했다면, 아래와 같이 기본적인 코드를 작성해주자.

my-app/src/pages/home.jsx

import React from 'react';

// react안에 Component를 받아와 class component를 만들어준다
class Home extends React.Component {
  render() {
    return <div>Home</div>;
  }
}

export default Home;

my-app/src/pages/about.jsx

import React from 'react';

class About extends React.Component {
  render() {
    return <div>About</div>;
  }
}

export default About;

my-app/src/pages/contact.jsx

import React from 'react';

// react안에 Component를 받아와 class component를 만들어준다
class Contact extends React.Component {
  render() {
    return <div>Contact</div>;
  }
}

export default Contact;

여기까지 작성이 완료가 되었다면, 이제 my-app/src/components폴더에 layout 폴더를 하나 더 만들어준다. 이후 폴더 안에 header.jsx content.jsx 파일을 만들어준다.

header.jsx

해당 파일에서는 클릭 시 route에서 정의한 페이지로 이동 할 수 있게 Link를 설정해준다.

// 상단의 메뉴바 component
// react-router-dom으로부터 Link를 받아온다
import React from 'react';
import { Link } from 'react-router-dom';

class Header extends React.Component {
  render() {
    return (
      <>
        <Link to="/">Home</Link>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </>
    );
  }
}

export default Header;

content.jsx

위에서는 route에서 정의한 페이지의 주소인 Link를 설정해주었다면, 해당 파일에서는 route에서 정의한 페이지의 component를 Link 즉, 페이지 주소에 맞는 component를 map을 이용해 각각 뿌려주게된다.

// 하단 페이지 내용의 component
import React from 'react';
import { Route, Switch } from 'react-router-dom';

import routes from '../../config/page-route.jsx';

class Content extends React.Component {
  render() {
    return (
      <Switch>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.component}
          />
        ))}
      </Switch>
    );
  }
}

export default Content;

routes의 배열에서 map을 통해 각각의 component를 뿌려주는데, route와 key값이 될 index를 인자로 받아온다. 이후 route를 정의한대로 key값과 path, exact, component를 차례대로 불러온다.

이제 마지막으로 my-app/src/App.jsx로 이동해서 최종적으로 렌더링이 될 App.jsx를 아래처럼 수정해주자

// App.jsx는 javaScript 확장자 버전
import React from 'react';

import Header from './components/layout/header.jsx';
import Content from './components/layout/content.jsx';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    );
  }
}

export default App;