[React] useAsync 조건문 사용하기 (if문 ❌)

💢 if문 내에서 useAsync 사용이 안 되는 문제

 

▪문제상황 : 

한 페이지 내에서 두 가지의 상태(buyer, seller)를 관리해야돼서

userType에 따라 buyer/seller data를 fetch하려고 했다.

if (userType === 'buyer') {
  const [buyerState] = useAsync(() => InfoService.getBuyer(user), []);
} else {
  const [sellerState] = useAsync(() => InfoService.getSeller(user), []);
}

근데 if문 안에 useAsync 선언하자마자 ESLint가 경고문을 띄움.

React Hook "useAsync" is called conditionally. React Hooks must be called in the exact same order in every component render.

 

그래서 state 두 개를 각각 따로 생성했다.

  const [sellerState] = useAsync(() => InfoService.getSeller(user), []);
  const [buyerState] = useAsync(() => InfoService.getBuyer(user), []);
  const { loadingSeller, data: seller, errorSeller } = sellerState;
  const { loadingBuyer, data: buyer, errorBuyer } = buyerState;

근데 이렇게 되니까 이하 모든 코드에서 두 개의 state에 대한 처리를 항상 해줘야했기 때문에

코드가 너무 길어지고 지저분해졌다.

if (userType === 'seller') {
  if (loadingSeller) return <div>로딩중..</div>;
  if (errorSeller) return <div>에러가 발생했습니다.</div>;
  if (!seller) return <div>데이터가 없습니다.</div>;
} else {
  if (loadingBuyer) return <div>로딩중..</div>;
  if (errorBuyer) return <div>에러가 발생했습니다.</div>;
  if (!buyer) return <div>데이터가 없습니다.</div>;
}

 

이건 너무 무식한 해결방법 같아서, 어떻게 하면 간결하게 만들 수 있을지 알아봤다.

 

 

▪해결방법 : 

custom Hook 생성.

나는 buyer/seller만 구분하면 되는 상황이니까 삼항연산자를 사용했다.

const [state] = useAsync(
  () =>
    userType === 'seller'
      ? InfoService.getSeller(user)
      : InfoService.getBuyer(user),
  [],
);
const { loading, data, error } = state;

// ...

if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다.</div>;
if (!data) return <div>데이터가 없습니다.</div>;

훨씬 깔끔해졌다. (As it should be 😏)

 

 

On a side note...

대학 4년간 과제/프로젝트 데드라인에 맞추기 위해

'어떻게든 돌아가기만 하면 되지'라는 마인드로 코딩을 해왔기에 습관이 한참 잘못 들었다.

그래서 코드를 효율적으로 작성하는게 익숙하지가 않고

'정말 최선으로 효율적인 코드인지'를 계속 신경 쓰다 보니까 스트레스도 받는다...ㅜㅜ

이런 사소한 리팩토링도 누군가에게는 우스워보이겠지만,

나한테는 한 단계의 발전이기에 기록해놓는다.