탭 UI 만들기

동적 UI 만드는거랑 똑같음
근데 또 기억이 가물가물하니까 정리를..

1. html css로 탭 디자인 미리 완성하기

디자인하기 귀찮으니까 부트스트랩으로 대체.

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

탭이 3개라 0, 1, 2이렇게 저장하기 위해서 숫자로.!

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

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

if문으로 비교하기 위해서, component로 이동 ㄱ ㄱ

function Detail(){
  let [tab, setTab] = useState(0)
  
  return (
    <TabContent tab={tab}/>
  )
}

function TabContent(props){
  if (props.tab === 0){
    <div>내용0</div>
  }
  if (props.tab === 1){
    <div>내용1</div>
  }
  if (props.tab === 2){
    <div>내용2</div>
  }
}

버튼 누르면 내용 변경되게

어떻게 ㅎㅏㄹ까? 는 onClick

<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>

근데 If로 안짜고 할 수 있대

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

....오,,,..

참고사항 : props 쉽게 쓰고 싶으면

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

이렇게 써도 된댜