[Lunch Box] 6. 상단탭과 라우팅 설정

상단 탭과 라우팅은 main.js에서 정의한다.

 

Main.js

import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { withStyles } from '@material-ui/core/styles';
import Home from '../home/Home';
import Menu from '../menu/Menu';
import Board from '../board/Board';
import My from '../my/My';
import Login from '../login/Login';
import BoardDetail from '../board/BoardDetail';
import Bottom from './Bottom';
const styles = () => ({
  mainTabs: {
    background: '#181a1e',
    float: 'left'
  },
  mainTab: {
    fontFamily: 'Noto Sans KR',
    color: 'white',
    height: '4rem',
    fontWeight: 'normal',
    background: '#181a1e'
  }
});

class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }

  handleChange = (event, newValue) => {
    this.setState({ value: newValue });
  }

  render() {
    const { classes } = this.props;
    return (
      <div>
        {/* Top menu */}
        <div style={{"overflow":"auto"}}>
          <Tabs
            className={classes.mainTabs} value={this.state.value} onChange={this.handleChange}
            variant='standard' indicatorColor='' centered style={{ width: "100%" }}>
            <Tab className={classes.mainTab} label="We are Sallab" component={Link} to="/main/home" />
            <Tab className={classes.mainTab} label="Menu" component={Link} to="/main/menu" />
            <Tab className={classes.mainTab} label="Sallabers" component={Link} to="/main/board" />
            <Tab className={classes.mainTab} label="My Sallab" component={Link} to="/main/my" />
            <Tab className={classes.mainTab} label="Login" component={Link} to="/main/login" />
            
          </Tabs>
        </div>
        {/* Main content using routing */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/main" component={Home} />
          <Route exact path="/main/home" component={Home} />
          <Route exact path="/main/menu" component={Menu} />
          <Route exact path="/main/board" component={Board} />
          <Route exact path="/main/board/detail" component={BoardDetail} />
          <Route exact path="/main/my" component={My} />
          <Route exact path="/main/login" component={Login} />
        </Switch>
        {/* Bottom */}
        <Bottom/>
      </div>
    )
  }
}

export default withStyles(styles)(Main);

 

Material-UI

기본적인 틀과 상단 탭의 Component는 Material-UI에서 제공하는 예시를 참고했다. Material-UI는 React에서 자주 사용하는 Component를 제공한다. 이를 이용하기 위해서는 패키지를 설정하고 import를 해야한다.

 

https://material-ui.com/components/tabs/

 

Tab, Tabs

프로젝트에서는 Tabs, Tab Component를 사용했다. Tabs는 value값을 받아 해당하는 Tab이 선택됨을 UI상으로 보여주는 역할을 한다. 따로 value를 설정하지 않았으므로 기본적으로 각 탭의 value는 0, 1, 2, 3 ,4가 된다. 특정 탭을 선택했을때 탭이 선택됨을 UI상으로 보여주는 과정은 다음과 같다.

 

1. 특정 탭이 선택되면 Tab에서 onChange로 설정한 함수가 실행되고 handleChange의 인자인 newValue에 탭의 value를 전달한다.

2. handleChange에서 state의 value값을 인자로 전달받은 newValue값으로 수정한다.

3. State의 값이 수정되었으므로 Tabs의 value도 수정된 value로 수정한다.

4. Value값이 수정되었으므로 해당하는 value를 가진 탭이 선택됨을 UI상으로 보여준다.

 

Tab에서는 component에 Link, to에 path를 전달한다. Tab은 component라는 props를 설정할 수 있는데 Tab은 설정된 component를 UI상에 나타낸다. 아무 설정이 없다면 기본적으로 설정된 component를 나타낸다. 여기서는 Link라는 component를 전달하였고 Link는 to라는 props가 필요하므로 to라는 props도 함께 전달하였다.

 

Link, Route, Switch

Link는 현재 path에서 to라는 props에서 전달받은 path를 추가하는 역할을 한다. 따라서 특정 탭을 선택하면 설정한 path로 변하게된다. path가 변하면 Route라는 component에서 설정된 component를 UI상에 나타낸다.

 

Route는 path와 component라는 props를 받는데, 현재 path와 설정한 path가 일치하면 props에서 전달한 component를 UI상에 나타낸다.

 

Switch는 내부에 정의된 Route에서 path에 맞는 Route를 찾으면 해당하는 Route만 보여준다. 만약 적절한 Route가 없으면 아무것도 보여주지 않는다. 위에서 밑으로 순서대로 찾기 때문에 자세한 path를 설정한 Route일수록 더 위에 정의하는게 좋다.

 

이에 대한 설명과 사용방법은 다음을 참고하였다.

 

https://reacttraining.com/react-router/web/guides/primary-components