Custom Hooks 만들기 (1/2)

서론

지난 프로젝트에서 Custom Hook 을 만들어 사용해 봤지만
조금 더 익숙하게 Custom Hook 을 분리하고 적용하고 만들 수 있으면 좋을 것 같았고,
실전 프로젝트에 조금이나마 도움이 될 수 있을 것 같아서 공부해봤다.

본론

useState를 이용한 custom hooks

const [item, setItem] = useState(1)

💡 1. useInput

/**
 *
 * @param { any } initailValue : useInput 의 초기값을 설정합니다.
 * @param { function } validator : input의 value를 검증할 함수를 설정합니다.
 * ex) const maxlen = value => value.length > 10
 * @returns {Object}
 * value : useInput Hook을 통해 validator가 적용된 value 입니다.
 * onChange : value를 change 할 수 있는 함수를 제공합니다.
 */

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

  return { value, onChange };
};

💡 2. useTabs

/**
 *
 * @param {Number} initialTab : 최초에 보여줄 탭의 인덱스를 설정합니다.
 * @param {Object} allTabs : 인덱스에 따라 달라질 객체 데이터를 설정합니다.
 * @returns {Object}
 * currentItem : 현재 선택된 index에 해당하는 item의 값을 가져옵니다.
 * changeItem : index를 setState 할 수 있는 함수를 제공합니다.
 */

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

  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex,
  };
};

export default useTabs;

결론

custom hook 의 return 값을 아예 함수로 만들어서
사용할 수도 있구나 하고 감탄했다 !
강의가 그렇게 길지 않아서 두세번 정도 보면서 처음부터 다시 만들어 보면서 공부해볼 예정.
신기하고 재밌다.