React Hooks - useState의 활용 (useInput, useTabs)

useInput

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    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 className="App">
      <h1>Hello</h1>
      <input placeholder="Name" value={name.value} onChange={name.onChange} />
    </div >
  );
}

• input 내용과 그에 따른 이벤트를 hooks를 통해 관리할 수 있다.
• 이처럼 useState는 다른 function에서 이벤트를 처리할 수 있도록 해준다.
• 이는 우리의 이벤트를 entity와 같은 분리된 파일에 연결해서 처리할 수도 있다는 것이기 때문에 유용하다.
• validator도 활용했기 때문에 10글자 아래로만 입력이 가능하다.

---

useTabs

const content = [
  {
    tab: "Section 1",
    content: "I'm the content of the Section 1"
  },
  {
    tab: "Section 2",
    content: "I'm the content of the Section 2"
  }
];

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if (!allTabs || !Array.isArray(allTabs)) {
    return;
  }
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  }
}

const App = () => {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
    <div className="App">
      <h1>Hello</h1>
      {content.map((section, index) => <button onClick={() => changeItem(index)}>{section.tab}</button>)}
      <div>
        {currentItem.content}
      </div>
    </div >
  );
};

• useState를 통해 Tab을 이동하고 그에 따라 content를 변경한다.
• 이 역시 useInput과 마찬가지로 여러 조건을 부여하는 등의 활용이 가능해 용이하다.