[React_study] if를 사용하지 않고 props를 사용하기

* if를 사용한 예시

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

function TabContent(props){
  if (props.tab === 0){
    return <div>content0</div>
  }
  if (props.tab === 1){
    return <div>content1</div>
  }
  if (props.tab === 2){
    return <div>content2</div>
  }
}

<Nav variant="tabs">
    <Nav.Item>
      <Nav.Link onClick={()=>{ setTab(0) }} eventKey="link0">Button0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ setTab(1) }} eventKey="link1">Button1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ setTab(2) }} eventKey="link2">Button2</Nav.Link>
    </Nav.Item>
</Nav>

---

* if문을 사용하지 않고 변경하기

• 방법1

function TabContent(props){
  return [ <div>content0</div>, <div>content1</div>, <div>content2</div> ][props.tab]
}

• 방법2 (객체 구조 분해 할당을 이용)

function TabContent({tab}){
  return [ <div>content0</div>, <div>content1</div>, <div>content2</div> ][tab]
}