TIL | useState로 Tab Menu 구현하기

import React, { useState } from 'react';
import Content1 from './Content1';
import Content2 from './Content2';

const Tabs = () => {
  const tabTitle = ['메뉴1', '메뉴2'];
  const tab = { 0: <Content1 />, 1: <Content2 /> };
  const [activeTab, setActiveTab] = useState(0);
  const onClickTab = (idx) => {
    setActiveTab(idx);
  };

  return (
    <>
      <div>
    	  //탭메뉴
    	  {tabTitle.map((title, idx) => {
          return (
            <span
              key={idx}
              onClick={() => onClickTab(idx)}
            >
              {title}
            </span>
          );
        })}
      </div>
      <div>
          //해당 콘텐츠
          {tab[activeTab]}
      </div>
    </>
  );
};

export default Tabs;