React - Tab컴포넌트 사용해 보기

React - Tab컴포넌트 사용해 보기

 

#1.0 설치 및 임포트

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

# 1.1 Tab 인덱스에 훅 걸어두기 ( 안걸어도 작동을 하지만 현재 어느 탭인지 모른다. Tab컴포넌트에서 onSelect로 알려주는걸 받아오자.

 

  const [index, setIndex] = useState(0);

 

 

      <Tabs selectedIndex={index} onSelect={index => setIndex(index)}>
        <TabList>
          <Tab>
            <span>TAB1</span>
          </Tab>
          <Tab>
            <span>TAB2</span>
          </Tab>
          <Tab>
            <span>TAB3</span>
          </Tab>
        </TabList>
        <div>now is {index}</div>
        <TabPanel>
          <div>IM ONE</div>
        </TabPanel>
        <TabPanel>
          <div>IM TWO</div>
        </TabPanel>
        <TabPanel>
          <div>IM THREE</div>
        </TabPanel>
      </Tabs>

# 1.2 예시) 매우 쉽다.

Tabs--- TabList--- Tab

Tabs--- TabPanel

Tabs--- TabPanel

Tabs--- TabPanel

import React, { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

export default () => {
  const [index, setIndex] = useState(0);
  return (
    <div>
      <Tabs selectedIndex={index} onSelect={index => setIndex(index)}>
        <TabList>
          <Tab>
            <span>TAB1</span>
          </Tab>
          <Tab>
            <span>TAB2</span>
          </Tab>
          <Tab>
            <span>TAB3</span>
          </Tab>
        </TabList>
        <div>now is {index}</div>
        <TabPanel>
          <div>IM ONE</div>
        </TabPanel>
        <TabPanel>
          <div>IM TWO</div>
        </TabPanel>
        <TabPanel>
          <div>IM THREE</div>
        </TabPanel>
      </Tabs>
    </div>
  );
};

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA