React Hooks 연습하기

3. useTab

import React, { useState } from "react";

const content = [
  {
    tab: "section1",
    contents: "🐶"
  },
  {
    tab: "section2",
    contents: "🐯"
  }
];
//I wrote wrong names on this array.

const useTab = (initial, allTabs) => {
if(!allTabs || !Array.isArray(allTabls)){
  return ;
 }

const [ currentIdx, setIdx ] = useState(initial, allTabs)
return  {
	currentItem : allTabs[currentIdx],
  	showItem : setIdx
   };
};

const App = () => {
  const { currentItem, showItem } = useTab(1, content);

  return (
    <div className="App">
      <div>useTab</div>
      {content.map((section, idx) => (
        <button onClick = {() => showItem(idx) }>{section.tab}</button>
      ))}
      <div>{currentItem.contents}</div>
    </div>
  );
};

export default App;

3. 결과물