본문 바로가기

배운 것/react & reacthooks

리액트 커스텀 훅 사용하기 => useTab

const contentAPI = [
  {
    tab: "section 1",
    content: "i am the content of the section1"
  },
  {
    tab: "section 2",
    content: "i am the content of the section2"
  }
];

const useTab = (initialTab, allTabs) => {
  // allTabs 이 배열이 아닐 때 함수 종료
  if (!allTabs || !Array.isArray(allTabs)) {
    return;
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};

const App = () => {
  // currentItem 은 useTab 커스텀 훅에 의하면
  // allTabs의 currentIndex번째 아이템이다
  const { currentItem, changeItem } = useTab(0, contentAPI);
  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>
      <div>
        {contentAPI.map((section, index) => (
          // changeItem(index) 을 onClick에 그대로 받으면
          // 함수가 즉시 실행되기 때문에
          // 익명 함수로 changeItem(index)를 전달한다
          <button onClick={() => changeItem(index)}>{section.tab}</button>
        ))}
        {/* contentAPI 배열의 currentItem 번째의 content 내용이 찍힌다 */}
        <div>{currentItem.content}</div>
      </div>
    </div>
  );
};

 

 

버튼 인덱스에 맞는 컨텐츠를 가져오는 로직은

 

1. onClick={() => changeItem(index)}

버튼 온클릭시 익명함수로 changeItem 을 커스텀훅인 useTab에 전달한다

 

2. changeItem: setCurrentIndex

changeItem 은 곧 setCurrentIndex 가 되고 useState에 의해

currentIndex 값이 갱신이 된다.

 

3. currentItem: allTabs[currentIndex]

currentItem이 리턴되어 컴포넌트에 {currentItem.content} 이 부분 역시 바뀐다.