(React) 쇼핑몰 만들기 - 상세화면에서 탭 만들기

(Detail.js)

/* eslint-disable */

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Nav } from "react-bootstrap";

function Detail(props) {
  const { id } = useParams();
  const shoe = props.shoes.filter((shoe) => shoe.id === Number(id));
  const [event, setEvent] = useState(true);
  const [tab, setTab] = useState(0);

  useEffect(() => {
    const to = setTimeout(() => {
      setEvent(false);
    }, 2000);
    return () => {
      clearTimeout(to);
    };
  }, []);

  if (shoe.length === 0) {
    return (
      <div>
        <h3>해당 상품은 존재하지 않습니다.</h3>
      </div>
    );
  } else {
    return (
      <>
        {event === true ? (
          <div className="alert alert-warning">2초 이내 구매시 할인</div>
        ) : null}
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <img
                src={"https://codingapple1.github.io/shop/shoes" + id + ".jpg"}
                width="100%"
              />
            </div>
            <div className="col-md-6">
              <h4 className="pt-5">{shoe[0].title}</h4>
              <p>{shoe[0].content}</p>
              <p>{shoe[0].price}</p>
              <button className="btn btn-danger">주문하기</button>
            </div>
            <Nav variant="tabs" defaultActiveKey="link1">
              <Nav.Item>
                <Nav.Link
                  eventKey="link1"
                  onClick={() => {
                    setTab(0);
                  }}
                >
                  1
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link
                  eventKey="link2"
                  onClick={() => {
                    setTab(1);
                  }}
                >
                  2
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link
                  eventKey="link3"
                  onClick={() => {
                    setTab(2);
                  }}
                >
                  3
                </Nav.Link>
              </Nav.Item>
            </Nav>
          </div>
          <Tab tab={tab} />
        </div>
      </>
    );
  }
}

function Tab({ tab }) {
  return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab];
}

export default Detail;

import { Nav } from "react-bootstrap";
 <Nav/>

👉 react-bootstrap 에서 Nav 를 import 하고 사용하였다.
그리고 tab state 를 만들어 탭을 누르면 변경해주고 그에 해당하는 내용을 Tab Component 를 이용하여 보여주도록 하였다.

function Tab({ tab })

👉 props를 변수로 넣어주는 대신에 {tab}을 넣어주면 props.tab 대신에 tab 으로 사용가능하다. props 추가하려면 {tab, state1, state2...} 하면 된다.

return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab];

👉 if~else if~else if~ 해도 되지만 배열과 tab state를 이용하여 표현해보았다.