Custom Hooks - usePending

만들게 된 계기....

저는 회사에서 Mobx를 사용해 개발을 하면서 항상 Store에서 isLoading 이라고 변수를 하나 만들어 데이터 get, post 등 비동기 함수를 사용 할 때 썼습니다... 하지만 항상 이렇게 쓸 때 마다 너무 비효율적인거 같고 어쩔때는 작동을 하지 않은적도 꽤 있었습니다. 그래서 계속 고민하고.. 검색해보고.. 하다가 딱 든 생각이

"Custom Hooks"

우선 만들고 나니 코드는 너무너무 간단했고, 만들고나서 회사 코드리뷰 시간에 이 Custom Hooks를 개발자분들에게 소개를 했습니다. 반응은 나쁘지 않았습니다 ㅎㅎ

원래 이렇게 글까지 쓸 생각까진 없었는데 쓰게된 이유는 동료개발자분께서 지인분에게 내 코드를 소개해도 되냐고 물어보고, 그 지인분이 되게 좋다고 평가를 듣고나서 써야겠다라고 생각이 들었습니다.

혹시 다른분들도 도움이 될 실 수 있을거 같아서 공유합니다.

import {useState} from 'react';

const usePending = func => {
  const [isPending, togglePending] = useState(false);

  const pendingFunc = async () => {
    togglePending(true);
    await func();
    togglePending(false);
  };

  return [isPending, pendingFunc];
};

export default usePending;

사용법

import React, {useEffect} from 'react';
import usePending from './usePending';

const List = ({ getList }) => {
  const [isPendingList, _getList] = usePending(getList)

 useEffect(() => {
 	_getList();
 },[])
 
 return {
 	isPendingList ?
 	<div>...Loading</div> :
    <div>List</div>
 }
};

export default List;

사용법 - 매개변수 있을 시

import React, {useEffect} from 'react';
import usePending from './usePending';

const Item = ({ getItem, match }) => {
  const {id} = match.params;
  const [isPendingItem, _getItem] = usePending(() => getItem(id))

 useEffect(() => {
 	_getItem();
 },[])
 
 return {
 	isPendingItem ?
 	<div>...Loading</div> :
    <div>Item</div>
 }
};

export default Item;

보시기에 변수나 함수 이름들이 좀 애매하다 싶거나, 개선 가능한 코드 있으시면 말씀해주세요.
읽어주셔서 감사합니다 :)