[React] React Hooks (3) - useTabs

useTabs

버튼에 따라 노출되는 내용을 변화시킬 수 있는 custom hook

 

useTabs 사용 예시

import React, { useState } from "react";
import ReactDOM from "react-dom";

const content = [
  {
    tab: "Secton 1",
    content: "I'm the content of the Section 1"
  },
  {
    tab: "Secton 2",
    content: "I'm the content of the Section 2"
  },
];

const useTabs = (initialTab, allTabs) => {
  if(!allTabs || Array.isArray(allTabs)) {
    return;
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};
  
const App = () => {
  const {currentItem, changeItem} = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={() => changeItem(index)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM render(<App />, rootElement);