Luigi 탭이 기본적으로 비활성화 되어 있는 간단한 사용 사례입니다. [tab]을 사용하여 탭에 초점을 맞추고 왼쪽 / 오른쪽 또는 위 / 아래 화살표를 사용하여 탭을 전환 할 수 있습니다.

https://reactcommunity.org/react-tabs/ 

https://github.com/reactjs/react-tabs

설치 

yarn add react-tabs

or

npm install --save react-tabs

또한 HTML 문서에서 React 탭을 UMD 빌드로 직접 사용할 수도 있습니다.

<script src="https://unpkg.com/react-tabs/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs/dist/react-tabs.production.min.js" />

기본 예 

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);