리액트에서 탭 UI만들기

강의를 들으며 새삼 알게 된 사실 : 컴포넌트에선 리턴문이 없으면 제기능을 못한다.

<동적인 UI만드는 법 복기>
1. html css로 미리 UI 디자인을 다 해놓고 = 전등을 예쁘게 달아놓고
2. UI의 현재 상태를 state에 저장해두고 = 스위치랑 연결하고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 = 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록

하나 하나 따라해봅시다.

첫 째, html css로 탭 디자인 미리 완성하기
react-bootstrap에서 가져오기

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>
//eventKey는 이름 부분이라 원하는대로 작명 가능
//defaultActiveKey 페이지 로드 시 어떤 버튼에 눌린 효과를 줄지 결정
<div>내용0</div>
<div>내용1</div>
<div>내용2</div> 

두 번째, UI의 현재 상태를 저장할 state 하나 만들기

function Detail(){
  let [탭, 탭변경] = useState(0)
  (생략)
}

세 번째, state에 따라서 UI가 어떻게 보일지 작성

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

바깥에서 props를 만들어서 html 안에 끼워넣어줌.
왜냐하면 일반 if조건문은 html 안에서 쓸 수 없기 때문에.

세 개를 합친 코드

import { useEffect, useState } from "react";
import { Nav } from 'react-bootstrap';
function Details() {
let [tab, setTab] = useState(0);
return
 <Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link eventKey="link0" onClick={()=>{setTab(0)}}>버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link1" onClick={()=>{setTab(1)}}>버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link2" onClick={()=>{setTab(2)}}>버튼2</Nav.Link>
    </Nav.Item>
      </Nav>
    <TabContent tab={tab}/>
}
function TabContent(props){
  if(props.tab === 0){
    return <div>내용0</div> ; 
 }else if(props.tab === 1 ){
    return <div>내용1</div> ;
 }else{
     return <div>내용2</div> ;
 }
}
export default Details;

Tip!
props를 쉽게 쓰는 방법

function TabContent({tab}){ //이렇게 매개변수 자리에 {tab} 이라고 적으면 아래에 props.tab을 안 써도 된다.
  if(tab === 0){
    return <div>내용0</div> ; 
 }else if(tab === 1 ){
    return <div>내용1</div> ;
 }else{
     return <div>내용2</div> ;
 }
}

매개변수 자리에 {tab} 이라고 적으면 아래에 props.tab을 안 써도 된다.