[React] tab UI

import { useEffect, useState } from "react";
import { Container, Row, Col, Nav } from "react-bootstrap";
import { useParams } from "react-router";
import styled from "styled-components";

function Detail(props){

    let [count, setCount] = useState(0)
    let [remove, setRemove] = useState(true)
    let [tab, setTab] = useState(0);
   
    useEffect(()=>{
        let a = setTimeout(()=>{setRemove(!remove)}, 2000)
    },[count]) 
  

    let{id} = useParams();
    if(id >= props.shoes.length){
        return <div>없는상품입니다.</div>
    }
    return(
        <div>
            <Container>
                {remove && <div className="alert alert-warning">
                    2초이내 구매시 할인
                </div>}
                <button onClick={()=>{ setCount (count+1)}}>버튼{count}</button>
                <Row>
                    <Col md={6}>
                        <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes[id].id+1)+".jpg"} width="80%"/>
                        <h4>{props.shoes[id].title}</h4>
                        <p>{props.shoes[id].content}</p>
                        <p>{props.shoes[id].price}원</p>
                        <button className="btn btn-danger">주문하기</button>
                    </Col>                                       
                </Row>
            </Container>
            {/* defaultActiveKey : 기본적으로 눌려 있을 키 */}
            <Nav variant="tabs" defaultActiveKey="link0"> 
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(0)}} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(1)}} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(2)}} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>
            {
                // 3항 연산자 : 연달아 사용 불가 -> if 조건문 사용하기 (html안에서 사용 불가)
                tab == 0 ? <div>내용0</div>:null
            }
            <TabContent tab={tab}/>
        </div>
    )
    
}

// props 대신 {} 안에 원하는 state 기입 
// props 여러개 사용할 경우 {props1, props2}
function TabContent({tab}){ 
    if(tab == 1){
       return <div>내용1</div>
    }else if(tab == 2){
        return <div>내용2</div> 
    }
    // return [ <div>내용 0</div>, <div>내용 1</div>, <div>내용 2</div> ][tab] 
    // tab이 return 할 내용을 배열 []에 넣기 -> tab 0,1,2 마다 div0,1,2 실행 됨
}



export default Detail;