Written by Parkdev
on January 21, 2024

탭UI 만들어보기

탭UI 만들기

모든 컴포넌트는 다음과 같은 단계로 제작

html/css만들기
상태 저장할 state만들기
연결하기

// State만들기
let [tab, setTab] = useState(0);

{/*  탭만들기 */}
      <Nav variant="underline" defaultActiveKey="tab1">
        <Nav.Item>
          <Nav.Link onClick={()=>setTab(0)} eventkey="tab1">탭 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={()=>setTab(1)} eventKey="tab2">탭 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={()=>setTab(2)} eventKey="tab3">탭 3</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent tab={tab} />

    </div>
  )};

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

짤팁

컴포넌트 props 받는 부분에서 전달된 값을 미리 정의해주면 props.를 안붙여도된다.

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

if문 안만들어도 반복 항목 만들 수 있다.

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

← → Top