React - Hook 리액트 훅 사용법 정리 (4) useTab

React - Hook 리액트 훅 사용법 정리 (4) useTab

 

https://codesandbox.io/s/black-flower-tslnv

불러오는 중입니다...

# 노마드 코더의 강좌 정리 입니다.

# useState를 기반으로 만들어진 Tab 훅입니다.

#1. Tab 데이터 만들기

const Tab = [
  {
    title: "section1",
    content: "im content 1"
  },
  {
    title: "section2",
    content: "im content 2"
  },
  {
    title: "section3",
    content: "im content 3"
  }
];

 

#2. useTab 훅 만들기

입력으로 : 처음 인덱스를 넣고 / tabs 데이터를 넣어줍니다.

반환으로 : tabs 리스트에서 내부 useState 변수에 의해 하나의 리스트 요소 반환합니다 / 인덱스를 바꿀 setidx

// in: 초기 탭 idx, 탭 리스트 out: 탭 리스트 아이템 , set인덱스
const useTab = (idx, Tabs) => {
  if (!Tabs || !Array.isArray(Tabs)) {
    return null;
  }
  const [currentIdx, setCurrentIdx] = useState(idx);
  return {
    currentItem: Tabs[currentIdx],
    changeItem: setCurrentIdx
  };
};

#3.  훅 사용하기 1

  const { currentItem, changeItem } = useTab(0, Tab);

 

#4.  훅 사용하기 2

      <div>
        {Tab.map((e, index) => (
          <button key={index} onClick={e => changeItem(index)}>
            {e.title}
          </button>
        ))}
      </div>
      <div>{currentItem.content}</div>

 

#5. 예제

import React, { useState } from "react";
import "./styles.css";

const Tab = [
  {
    title: "section1",
    content: "im content 1"
  },
  {
    title: "section2",
    content: "im content 2"
  },
  {
    title: "section3",
    content: "im content 3"
  }
];
// in: 초기 탭 idx, 탭 리스트 out: 탭 리스트 아이템 , set인덱스
const useTab = (idx, Tabs) => {
  if (!Tabs || !Array.isArray(Tabs)) {
    return null;
  }
  const [currentIdx, setCurrentIdx] = useState(idx);
  return {
    currentItem: Tabs[currentIdx],
    changeItem: setCurrentIdx
  };
};

export default function App() {
  const { currentItem, changeItem } = useTab(0, Tab);
  return (
    <div className="App">
      <h1>InputHooks with validator</h1>
      <div>
        {Tab.map((e, index) => (
          <button key={index} onClick={e => changeItem(index)}>
            {e.title}
          </button>
        ))}
      </div>
      <div>{currentItem.content}</div>
    </div>
  );
}

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA