React - Hook 리액트 훅 사용법 정리

https://dosimpact.tistory.com/34

React - Hook 리액트 훅 사용법 정리

https://codesandbox.io/s/black-flower-tslnv?file=/public/index.html

위는 useState를 기반으로 만들어진 Tab 훅 이다.

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>
  );
}

해야 할 일은 간단히 2가지 이다.
1. Tab 데이터 만들기

2. usetab 훅 만들기
   입력은 : 처음 인덱스를 넣고/ tabs 데이터를 넣어준다
   반환은 : tabs 리스트에서 내부 useState 변수에 의해 하나의 리스트 요소를 반환한다
   즉, idx를 바꿀 setIdx
   

3. 훅 사용하기

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

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

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

4. 예제

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>
  );
}