[React] CustomHook 👉 useTabs

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다.

1. useTabs 이란

• button tab 이라고 생각하면 된다!
  
  

2. useTabs 작성하기

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);

  // function 시작할 때 에러 확인
  if (!allTabs || !Array.isArray(allTabs)) {
    return;
  }

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

3. useTabs 사용하기

• 먼저 가져올 데이터를 만들어준다.
  • api를 가져오는 등으로 활용할 수 있다!

const content = [
  {
    tab: "section 1",
    content: "section1의 content"
  },

  {
    tab: "section 2",
    content: "section2의 content"
  },

  {
    tab: "section 3",
    content: "section3의 content"
  }
]

• 데이터 보여주기

const App = () => {
  const {currentItem, changeItem} = useTabs(0, content);

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

4. 에러 발생..

Each child in a list should have a unique "key" prop.
이와 같은 에러가 발생가 발생했다.
key 값이 없어서 에러가 발생했던 것...

<button onClick={() => changeItem(index)} key={index}> {section.tab} </button>

key={index} 를 사용하여 해결했다!!!