[Material-UI 실습] 9. Tab, Tabs

Tab, Tabs는 화면 전환을 위해 사용하는 컴포넌트이다. Tabs 컴포넌트 안에 Tab 컴포넌트가 위치하고 Tab을 클릭하면 화면이 전환되어야 한다. 두 컴포넌트를 이용하여 화면 전환을 하는 방법은 두 가지이다.

 

1. Tab, Tabs와  Route 컴포넌트를 활용하여 url이 변하면서 실제로 페이지가 전환되도록 하는 방법

이 방법은 이전에 [Lunch-Box] 프로젝트를 할 때 사용하였으므로 다음을 참고한다.

https://jongbeom-dev.tistory.com/10?category=835620

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

 

2. Tab, Tabs만 사용하여 특정 컴포넌트를 보이게 하거나 보이지 않게 처리하여 페이지를 전환하는 효과를 내는 방법

 

여기서는 두 번째 방법을 설명하겠다. 코드는 Material-UI에서 제공하는 Tabs 컴포넌트의 첫 번째 예제를 참고하였다. TabTutorial 컴포넌트에서 Tab, Tabs 컴포넌트를 이용하여 상단 탭을 구현하였고 각 탭을 클릭했을 때 보여줄 내용은 TabPanel에서 구현하였다.

 

TabTutorial.js

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
class TabTutorial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }
  a11yProps = (index) => {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }
  handleChange = (event, newValue) => {
    this.setState({ value: newValue });
  }
  render() {
    return (
      <div>
        <AppBar position="static">
          <Tabs value={this.state.value} onChange={this.handleChange} aria-label="simple tabs example">
            <Tab label="Item One" {...this.a11yProps(0)} />
            <Tab label="Item Two" {...this.a11yProps(1)} />
            <Tab label="Item Three" {...this.a11yProps(2)} />
          </Tabs>
        </AppBar>
        <TabPanel value={this.state.value} index={0}>
          Item One
      </TabPanel>
        <TabPanel value={this.state.value} index={1}>
          Item Two
      </TabPanel>
        <TabPanel value={this.state.value} index={2}>
          Item Three
      </TabPanel>
      </div>
    );
  }
}
class TabPanel extends Component {
  render() {
    return (
      <Typography component="div" hidden={this.props.value !== this.props.index}>
        <Box p={3}>{this.props.children}</Box>
      </Typography>
    );
  }
}
export default TabTutorial;

 

 

각 탭을 클릭했을 때의 화면 결과는 다음과 같다.

 

첫 번째 탭을 클릭했을 때

 

두 번째 탭을 클릭했을 때

세 번째 탭을 클릭했을 때

TabTutorial 컴포넌트에서는 Tabs 컴포넌트 안에 세 개의 Tab 컴포넌트가 들어가도록 작성하여 상단에 세 개의 탭이 보이도록 구현하였다. Tabs의 value 속성에는 state의 value값을 전달하고 onChange 속성에는 handeChange라는 함수를 전달하였다.

 

Tabs의 value 속성은 몇 번째 Tab이 선택되었는지를 나타낸다. value 값이 0이면 첫 번째 Tab이 선택되었음을 화면상으로 보여준다.

 

Tabs안에서 선택된 Tab을 제외하고 다른 Tab을 클릭하면 Tabs의 value값이 바뀌는데, 이때 onChange 속성으로 설정한handleChange 함수가 콜백으로 실행된다. handleChange에서는 state의 value값을 새롭게 설정된 value값으로 수정한다. 결과적으로 Tabs의 value값도 수정되어 클릭한 Tabs가 선택되었음을 화면상으로 보여준다.

 

state의 value값이 바뀌면 TabPanel 컴포넌트의 value 속성 값도 수정된다. TabPanel에서는 hidden을 props의 value값과 index값이 일치하면 fasle를 반환하여 보이도록 하고 다르면 true를 반환하여 보이지 않도록 한다. 따라서 i값을 value로 설정된 경우 index가 i값인 컴포넌트만 보여 화면이 전환되는 효과를 내게 된다.

 

Tab컴포넌트에 관한 내용은 다음을 참고하였다.

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

Tabs React component - Material-UI

예제 확인

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial