[CustomHook]useTab

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

// custom hook
const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if (!allTabs || !Array.isArray(allTabs)) {
    return; //유효성검사
  }

  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};
// 컴포넌트
export default function App() {
  const { currentItem, changeItem } = useTabs(0, content);

  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={()=>changeItem(index)} key={section.tab}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
}

1. useTabs에 초기값 0과 content(데이터)를 넘겨줌.
2. 커스텀훅에서는 유효성 검사.
3. 커스텀훅은 초기값에 해당하는 데이터와 데이터를 선택하는 스테이트 변경함수를 넘겨줌
4. 컴포넌트에서는 버튼을 클릭하면 해당 인덱스 값을 changeItem에 넘겨주고 즉 커스텀훅의 setCurrentIndex 함수가 실행되고 content가 변하게 됨.