[리액트] 탭 내용까지 구현하는 방법

 
 import Tab from "./components/Tab";
import Furniture from "./containers/Furniture";
import Option from "./containers/Option";
import Visiter from "./containers/Visiter";

type TabItem = {
  id: number;
  title: string;
  content: string;
};

const tabItems: TabItem[] = [
  { id: 1, title: "통계", content: "a" },
  { id: 2, title: "옵션", content: "b" },
  { id: 3, title: "품목", content: "c" },
];
 
 function App() {
  const [selectedTabId, setSelectedTabId] = useState(1);
  console.log(selectedTabId);

  return (
    <div className="App">
 
 <div className="max-w-[1104px] mx-auto flex justify-between items-center pt-14">
          {tabItems.map((tabItem) => {
            return (
              <Tab
                key={tabItem.id}
                tabTitle={tabItem.title}
                isSelectedTab={tabItem.id === selectedTabId}
                onClick={() => setSelectedTabId(tabItem.id)}
              />
            );
          })}
        </div>
        <div>
          {selectedTabId === 1 ? (
            <Visiter />
          ) : selectedTabId === 2 ? (
            <Option />
          ) : (
            <Furniture />
          )}
        </div>
        
            </div>
  );
}

//tab(menuName)
export default App;

 

탭까지는 구현했으나 

다른 컴포넌트들로 만들어 놓은 하위 컨텐츠 내용까지 탭을 누르면

따라오게 하는 것은 어떻게 해야하는지 ㅠㅠ

 

이것저것 엄청 고민해보았다....

생각보다 쉬웠지만 항상 어렵게 생각하다보면 머릿속이 복잡해지고 정리가 되지 않는다

 

여기서 useState 를 눌렀는지 안눌렀는지 그 누른 Id 값은 무엇인지만 생각하면

간단하게 해결할 수 있었다...

 

뭔가 조금만 응용을 하면 헷갈리고 어떻게 해야할지 모르겠다...

계속 하다보면 늘겠지? ㅠㅠ

 

 

 

아무튼 완성된 결과물