REACT_reactstrap Tab

Tab 사용하기

: Tab 패키지는 사용자 동작에 따라 특정 영역에 다른 내용을 표시할 때 사용한다

클릭 이벤트에 따라 원하는 영역을 표시해야 할 경우 간편하게 사용할 수 있다

 

- R055_ReactstrapTab.js

import React, { Component } from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';

class R055_ReactstrapTab extends Component {
    constructor (props) {
        super(props);
        this.state = { TabState:'React'}
    }

    toggle = (tabnum) => {
        if(this.state.TabState !== tabnum) this.setState({TabState:tabnum});
    }

    render() {
        return(
            <>
            <Nav tabs>
                <NavItem>
                    <NavLink onClick={()=> {this.toggle('React'); }}>First Tab</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink onClick={()=> {this.toggle('200'); }}>Second Tab</NavLink>
                </NavItem>
            </Nav>
            <TabContent activeTab={this.state.TabState}>
                <TabPane tabId="React"><h3>React</h3></TabPane>
                <TabPane tabId="200"><h3>200</h3></TabPane>
            </TabContent>
            </>
        )
    }
}

export default R055_ReactstrapTab;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapTab from './R055_ReactstrapTab'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapTab/>
    </div>
  );
}

export default App;

 

결과

왼쪽 상단 Tab 클릭하면 각각의 값이 나온다