#2. useTabs hook

useTabs

---

특정 element를 탭 하면 원하는 특정 내용만 보여줄 수 있는 기능

import { useState } from "react";

const content = [
  { tab: "Section 1", content: "I'm the content of the Section 1" },
  { tab: "Section 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>
      ))}
      <br />
      {currentItem.content}
    </div>
  );
};

export default App;

# 동작이 수행되는 과정

• useTabs(0, content) => 현재 content의 index는 0이다. ("section 1" 부분)
• useTabs는 content[현재 index] 와 index를 바꿀 수 있는 setCurrentIndex 함수를 프로퍼티로 하는 객체를 반환한다.
• content.map((section, index)) 을 통해 content 배열 수 만큼 버튼을 생성한다.
  • 첫 번째 인자 section은 현재 인덱스에 해당하는 값을 가져온다. 
  • 두 번째 인자 index는 현재 인덱스를 가져온다.
• 버튼을 클릭하면 changeItem(해당 인덱스) 가 실행되어 현재 인덱스의 상태가 바뀌면서 리렌더 된다.
  • 이 때 상태 즉, currentIndex는 바뀐 인덱스 값이 저장된다.
• {currentItem.content}을 수행할 때는 이 때 allTab[currentIndex] (여기서는 content 배열) 의 content ("I'm the content~") 가 출력된다.

 

• if (!allTabs || !Array.isArray(allTabs)) {
      return;
    } // 에러를 처리해준다. allTabs 가 false이거나 allTabs가 배열이 아니면 그냥 return을 수행한다.
  • Array.isArray(~)는 해당 인자가 Array인지 판단해서 boolean값을 리턴한다.