React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(2) - 라우팅(Routing)

1편 : https://wdprogrammer.tistory.com/16

1편에서 사용할 패키지 설치와 기본적인 폴더 구조를 완성했습니다.

이제 만들어진 구조에 코드를 작성하여 메인 페이지를 만들겠습니다!

3. Page Routing

SPA(Single Page Application)는 다른 페이지로 이동하는 것이 다른 html 문서로 이동하는 것이 아닙니다. 마치 다른 페이지로 이동한 것처럼 보이지만, 사실 한 html 내에서 다른 객체를 그려주는 것에 불과합니다. 이를 라우팅이라 하고 React Router 패키지를 사용하여 구현할 것입니다.

먼저, 표시해줄 기본 페이지를 만들겠습니다.

pages/Home.js

import React from 'react';
​
const Home = () => (
    <div>
        This page is Home
    </div>
);
​
export default Home;

제일 첫 화면에 보여줄 Home 페이지를 생성합니다.

 

pages/Signup.js

import React, {Component} from 'react';
​
class Signup extends Component {
    render() {
        return (
            <div>
                This is signup page
            </div>
        )
    }
};
​
export default Signup;

마찬가지로 회원가입 페이지를 생성합니다.

Home.js와 다르게 Redux를 사용하여 상태 관리를 하기 때문에 Component를 상속받아 구현하겠습니다.

 

pages/index.js

export { default as Home } from './Home';
export { default as Signup } from './Signup';

 이제 페이지를 표시하기 위해 라우팅을 구현합니다.

Root.js

import React from 'react';
import App from 'App';
import { BrowserRouter } from 'react-router-dom';
​
const Root = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)
​
export default Root;

 

App.js

xxxxxxxxxx
import React, { Component } from 'react';
import { Home, Signup } from 'pages';
import { Route, Switch } from 'react-router-dom';
​
class App extends Component {
    render() {      
        return (
            <div>
                <Route exact path="/" component={Home} />
                <Route path="/signup" component={Signup} />
            </div>
        );
    };
};
​
export default App;

 

index.js

xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Root from './Root';
import * as serviceWorker from './serviceWorker';
​
ReactDOM.render(<Root />, document.getElementById('root'));
​
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Root.js에서 BrowserRouter를 통해 라우팅 기능을 수행하고 App.js에 정의된 route에 따라 다른 페이지를 보여주게 됩니다.

이제 yarn start를 입력해 실행하면 "This page is Home"이라는 문구가 뜨고, 주소 창에 http://localhost:3000/signup를 입력하면 "This is signup page" 라는 문구가 뜨게 됩니다.

 

4. 메인(로그인) 페이지 만들기

레이아웃을 빠르게 구성하기 위해 Semantic UI React를 사용하겠습니다.

css를 적용하기 위해 패키지를 추가로 설치해주고

yarn add semantic-ui-css

index.js

import './index.css' 를 지워주고 아래 코드를 입력합니다.

xxxxxxxxxx
import 'semantic-ui-css/semantic.min.css';

참고 : https://react.semantic-ui.com/layouts/

 

components/Login/Login.js

x
import React, { Component } from 'react'
import logo from 'image/logo.png';
import { Link } from 'react-router-dom';
​
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'
​
class Login extends Component {
  render() {
    return (
      <div className='login-form'>
        {/*
        Heads up! The styles below are necessary for the correct render of this example.
        You can do same with CSS, the main idea is that all the elements up to the `Grid`
        below must have a height of 100%.
      */}
        <style>{`
        body > div,
        body > div > div,
        body > div > div > div.login-form {
          height: 100%;
        }
      `}</style>
        <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
          <Grid.Column style={{ maxWidth: 450 }}>
            <Header as='h2' color='teal' textAlign='center'>
              <Image src={logo} /> Log-in to your account
            </Header>
            <Form size='large'>
              <Segment stacked>
                <Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail address' />
                <Form.Input
                  fluid
                  icon='lock'
                  iconPosition='left'
                  placeholder='Password'
                  type='password'
                />
​
                <Button color='teal' fluid size='large'>
                  Login
                </Button>
              </Segment>
            </Form>
            <Message>
              Join or Create your Project!<br />
              <Link to="/signup">Sign Up</Link>
            </Message>
          </Grid.Column>
        </Grid>
      </div>
    )
  }
}
​
export default Login;

위 코드에서 알아야 될 부분들만 설명하겠습니다.

 

로고 넣기

x
import logo from 'image/logo.png';
// ...
    <Header as='h2' color='teal' textAlign='center'>
        <Image src={logo} /> Log-in to your account
    </Header>
// ...

image 폴더 내 사용하고자 하는 로고 이미지를 넣어주고 logo라는 객체로 불러온 다음 Semantic UI React의 Image를 사용하여 이미지를 표시합니다.

 

페이지 이동 링크 설정

x
import { Link } from 'react-router-dom';
// ...
    <Message>
        Join or Create your Project!<br />
        <Link to="/signup">Sign Up</Link>
    </Message>
// ...

React Router의 Link 객체를 이용해서 Sign Up을 누르면 /signup 페이지를 표시하도록 설정했습니다.

 

components/Login/index.js

export { default } from './Login';

 

pages/Home.js

x
import React from 'react';
import Login from 'components/Login';
​
const Home = () => (
    <div>
        <Login/>
    </div>
);
​
export default Home;

이렇게 하면 멋진 로그인 창이 떠있는 것을 보실 수 있습니다. 여기서 좀 더 있어보이기 위해 레이아웃을 수정하겠습니다. 이 과정은 하지 않아도 앞으로 진행하는데 문제가 없습니다.

xxxxxxxxxx
import React from 'react'
import Login from 'components/Login';
import {
  Container,
  Divider,
  Dropdown,
  Grid,
  Header,
  Image,
  List,
  Menu,
  Segment,
} from 'semantic-ui-react'
import logo from 'image/logo.png';
​
const FixedMenuLayout = () => (
  <div>
    <Menu fixed='top' inverted>
      <Container>
        <Menu.Item as='a' header>
          <Image size='mini' src={logo} style={{ marginRight: '1.5em' }} />
          PLJEC
        </Menu.Item>
        <Menu.Item as='a'>Home</Menu.Item>
​
        <Dropdown item simple text='Dropdown'>
          <Dropdown.Menu>
            <Dropdown.Item>List Item</Dropdown.Item>
            <Dropdown.Item>List Item</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Header>Header Item</Dropdown.Header>
            <Dropdown.Item>
              <i className='dropdown icon' />
              <span className='text'>Submenu</span>
              <Dropdown.Menu>
                <Dropdown.Item>List Item</Dropdown.Item>
                <Dropdown.Item>List Item</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown.Item>
            <Dropdown.Item>List Item</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Container>
    </Menu>
​
    <Container text style={{ marginTop: '7em' }}>
      <Login/>
    </Container>
​
    <Segment inverted vertical style={{ margin: '5em 0em 0em', padding: '5em 0em' }}>
      <Container textAlign='center'>
        <Grid divided inverted stackable>
          <Grid.Row>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Group 1' />
              <List link inverted>
                <List.Item as='a'>Link One</List.Item>
                <List.Item as='a'>Link Two</List.Item>
                <List.Item as='a'>Link Three</List.Item>
                <List.Item as='a'>Link Four</List.Item>
              </List>
            </Grid.Column>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Group 2' />
              <List link inverted>
                <List.Item as='a'>Link One</List.Item>
                <List.Item as='a'>Link Two</List.Item>
                <List.Item as='a'>Link Three</List.Item>
                <List.Item as='a'>Link Four</List.Item>
              </List>
            </Grid.Column>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Group 3' />
              <List link inverted>
                <List.Item as='a'>Link One</List.Item>
                <List.Item as='a'>Link Two</List.Item>
                <List.Item as='a'>Link Three</List.Item>
                <List.Item as='a'>Link Four</List.Item>
              </List>
            </Grid.Column>
            <Grid.Column width={7}>
              <Header inverted as='h4' content='Footer Header' />
              <p>
                Extra space for a call to action inside the footer that could help re-engage users.
              </p>
            </Grid.Column>
          </Grid.Row>
        </Grid>
​
        <Divider inverted section />
        <Image centered size='mini' src='/logo.png' />
        <List horizontal inverted divided link>
          <List.Item as='a' href='#'>
            Site Map
          </List.Item>
          <List.Item as='a' href='#'>
            Contact Us
          </List.Item>
          <List.Item as='a' href='#'>
            Terms and Conditions
          </List.Item>
          <List.Item as='a' href='#'>
            Privacy Policy
          </List.Item>
        </List>
      </Container>
    </Segment>
  </div>
)
​
export default FixedMenuLayout

여기까지 진행했으면 다음과 같은 화면이 나타나고 Sign up을 누르면 회원가입 페이지로 이동될 것입니다.

결과