[React] Hook : useInput, useTab

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
  	const {
      target: {value}
    } = event;
    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };
  return { value, onChange };
}

const App = () => {
  const maxLen = value => value.length <= 10;
  const name = useInput("Mr.", maxLen);
  return (
    <div>
      //1, 2는 같다.
      //1.
      <input {...name} />
      //2.
      <input value={name.value} onChange={name.onChange}/>
    </div>
  )
}

useTab

import { useState } from "react";
//1. tab 리스트를 만든다.
const tabsContents = [
  {
    name: "contents1",
    content: "contents1"
  },
  {
    name: "contents2",
    content: "contents2"
  }
];

export const useTab = (init, allTabs) => {
  // 2. init: 초기화, allTabs: 탭 리스트
  const [curIndex, setCurIndex] = useState(init);
  return {
    curItem: allTabs[curIndex], //3. 현재 탭은 탭 리스트에서 i번째 아이템이다.
    changeItem: setCurIndex //4. 상태를 변경해주는 함수
  };
};

export default function App() {
  const { curItem, changeItem } = useTab(0, tabsContents);

  return (
    <div className="App">
      <h1>useTab</h1>
      {tabs.map((el, i) => {
        return (
          <button
            onClick={() => {
              changeItem(i);
            }}
            key={i}
          >
            {el.name}
          </button>
        );
      })}
      <div>{curItem.content}</div>
    </div>
  );
}