[React-Hooks] React Hooks - useTab

* useTab

• button을 클릭하였을때 보여지는 내용을 다르게 보여주는 기능

const content = [
  {
    tab: "first button",
    content: "click first button"
  },
  {
    tab: "second button",
    content: "click second button"
  }
];

* map함수를 이용하여서 button을 만들어준다.

const App = () => {
  return (
    <div>
      {
        content.map((section) => {
          return (
            <button>{section.tab}</button>
          )
        })
      }
    </div>
  );
};

---

* useTab hook (전체코드 및 사용 되는 흐름)

const content = [
  {
    tab: "first button",
    content: "click first button"
  },
  {
    tab: "second button",
    content: "click second button"
  }
];

const useTab = (initialTab, allTabs) => {
  if (!allTabs || !Array.isArray(allTabs)) {
    return;
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};

const App = () => {
  const { currentItem, changeItem } = useTab(0, content);
  return (
    <div>
      {content.map((section, index) => {
        return <button onClick={() => changeItem(index)}>{section.tab}</button>;
      })}
      <div>{currentItem.content}</div>
    </div>
  );
};

• 초기탭의 값과 모든탭을 인자로 받는다.
• allTabs가 없거나 allTabs가 배열이 아닐 경우 return을 하여서 함수를 종료한다.
• currentItem은 모든탭중 currentIndex번째 탭을 불러와준다.
• changeItem을 이용해서 tab을 변경해준다.
• { currentItem, changeItem } 객체 디스트럭처링을 이용해서 useTab함수의 값을 할당해준다.
• map함수를 이용해 content들을 새로운 배열로 구성해준뒤 button을 만들어준다.
• onClick시 changeItem함수에 index를 받아주어서 currentIndex를 변경해준다.
• {currentItem.content}를 이용해 변경된 탭의 content를 불러와준다.