react 탭 UI 만들기

동적인 ui 3스텝 따라가기.

1. html css로 디자인 미리 완성해놓고

• react bootstrap 활용해서 ui설계

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>
<div>내용0</div>
<div>내용1</div>
<div>내용2</div> 

2. UI의 현재 상태를 저장할 state 하나 만들고

• 3개이상의 탭. 숫자로하면 될듯.

let [탭, 탭변경] = useState(0);

3. state에 따라서 UI가 어떻게 보일지 작성.

컴포넌트 하나 작성.
props로 탭 state 넘기고, 탭에따라 분기하여 html을 return하도록 작성하면 될듯.

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][props.탭]
}

결과

//state
  let [탭, 탭변경] = useState(0);
.
.
.
//ui
<Nav variant="tabs" defaultActiveKey="link0">
  <Nav.Item>
  <Nav.Link onClick={() => 탭변경(0)} eventKey="link0">
    버튼0
</Nav.Link>
</Nav.Item>
<Nav.Item>
    <Nav.Link onClick={() => 탭변경(1)} eventKey="link1">
      버튼1
</Nav.Link>
</Nav.Item>
<Nav.Item>
      <Nav.Link onClick={() => 탭변경(2)} eventKey="link2">
        버튼2
</Nav.Link>
</Nav.Item>
</Nav>
<TabContent 탭={탭} />
.
.
.
//component
const TabContent = (props) => {
  return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][props.탭];
};