Today I Learned - 0724

devsooki·2021년 7월 24일
2
post-thumbnail

useState를 활용한 Hooks 예제를 하나 더 배워보았다.

useTabs()

탭을 누르면 그 탭안에 있는 내용을 보여주는 Hooks이다.
간단해 보이지만, useState()와 자바스크립트 구조에 대한 공부가 많이 된 예제였다.

const contents = [
  {
    tab: 'Seciton 1',
    content: 'I am the content of the Section 1',
  },
  {
    tab: 'Seciton 2',
    content: 'I am the content of the Section 2',
  },
];

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  // if 하단에 있으면 작동하지 않고 오류가 난다.

  if (!allTabs || !Array.isArray(allTabs)) return;

  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex,
  };
};

const App = () => {
  const { currentItem, changeItem } = useTabs(0, contents);
  return (
    <div>
      {contents.map((section, index) => (
        <button onClick={() => changeItem(index)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};
profile
주니어 개발자의 기록하는 공간✍🏻

0개의 댓글