탭 UI

function Detail(){

// 2. UI의 현재 상태를 저장할 state 생성  
let [탭, 탭변경] = useState(0)
  
  return (

		// 1. html, css로 탭 디자인 완성하기
		<Nav variant="tabs"  defaultActiveKey="link0">
			<Nav.Item>
			  <Nav.Link onClick={ ()=>{ 탭변경(0)} } eventKey="link0">버튼0</Nav.Link>
			</Nav.Item>
			<Nav.Item>
			  <Nav.Link onClick={ ()=>{ 탭변경(1)} } eventKey="link1">버튼1</Nav.Link>
			</Nav.Item>
			<Nav.Item>
			  <Nav.Link onClick={ ()=>{ 탭변경(2)} } eventKey="link2">버튼2</Nav.Link>
			</Nav.Item>
		</Nav>
		<TabContent 탭={탭} />
  )
}

// 3-1. state의 따라서 UI가 어떻게 보일지 작성
function TabContent(props){
  if (props.탭 === 0){
    return <div>내용0</div>
  }
  if (props.=== 1){
    return <div>내용1</div>
  }
  if (props.탭 === 2){
    return <div>내용2</div>
  }
}

삼항연산자로 제어

function Detail() {

return (
	{
	  tab === 0 ? <div>내용0</div>
	    : tab === 1 ? <div>내용1</div>
	      : tab === 2 ? <div>내용2</div>
	        : null
	} 
)

if문 없이 UI제어

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

참고

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

자식컴포넌트에서 props 라고 파라미터를 하나만 작성하는게 아니라 객체 타입으로 { state1, state2, … } 라고 작성하면 props.탭 대신 탭 이라고 쓸 수 있다.