모듈 탭 구현하기

[주인장]

1. 탭 구분 구성하기 

<Nav fill variant="tabs"  defaultActiveKey="link0">

    <Nav.Item>

        <Nav.Link eventKey="link0" xxonClick={()=> {setTabIndex(0);}}>

            버튼0

        </Nav.Link>

    </Nav.Item>

    <Nav.Item>

        <Nav.Link eventKey="link1" xxonClick={()=> {setTabIndex(1);}}>

            버튼1

        </Nav.Link>

    </Nav.Item>

    <Nav.Item>

        <Nav.Link eventKey="link2" xxonClick={()=> {setTabIndex(2);}}>

            버튼2

        </Nav.Link>

    </Nav.Item>

</Nav>

<TabContent tabIndex={tabIndex} />

2. 내용 구성하기 

const TabContent = (props) => {

    if(props.tabIndex === 0) {

        return <div>0번째 탭</div>

    }

    if(props.tabIndex === 1) {

        return <div>1번째 탭</div>

    }

    if(props.tabIndex === 2) {

        return <div>2번째 탭</div>

    }

}