<React>Tab UI 만들기

나의목표 🙌
쇼핑몰의 사이트의 상세보기에 들어가면 탭에 따라 원하는 정보가 들어있다
탭을 넘기면 해당 탭에 따른 내용이 들어있게 만들어보자

각 Tab(버튼)은 bootstrap의 nav에서 가져왔다
각 Tab에 onClick을 주고 usestate 함수를 통해 번호를 넘겨준다
조건문을 통해 번호가 일치하면 내용을 보여줄 수 있도록 한다

import { useState } from 'react';
import { Nav } from 'react-bootstrap';

function Detail() {
  let [tab, setTab] = useState(0);

  return (
    <>
<Nav variant='tabs' defaultActiveKey='link-1'>
        <Nav.Item>
          <Nav.Link eventKey='link-1' onClick={() => setTab(0)}>
            후기
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey='link-2' onClick={() => setTab(1)}>
            상세설명
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey='link-3' onClick={() => setTab(2)}>
            문의사항
          </Nav.Link>
        </Nav.Item>
      </Nav>
      {tab == 0 ? <div>내용0</div> : null}
      {tab == 1 ? <div>내용1</div> : null}
      {tab == 2 ? <div>내용2</div> : null}
    </>