<aside> 💡 새로운 매개변수를 추가하고 조건부 경로를 추가할수록, 해당 추상화는 망가져간다.

</aside>

TL;DR

중복된 코드는 잘못된 추상화보다 훨씬 저렴하다.

잘못된 추상화

먼저 잘못된 추상화란 무엇일까?

단일 책임의 원칙

나는 최근 아래 코드를 리팩토링하며, 내가 했던 실수와, 그에대한 해결의 과정을 담아보고자 한다.

[리팩토링 전]

export function Page() {
	const { data } = useQuery([`${QUERY_KEY.USER}`,'name' ], getUserName);
  const { requestTimeOut } = usePoller();

  return (
    <>
      <Title>{`${data?.name}님의 정보를 확인하고있습니다.`}</Title>
      <LoadingUI/>
      <PollingErrorFallbackModal requestTimeOut={requestTimeOut} />
    </>
  );
}

useQuery , usePoller 모두 서버 상태를 핸들링하므로, 통합하고 싶은 욕구가 생겼다.

usePoller hook 안에서도 useQuery 를 사용하고 있어서, 막연하게 getUserName query를

usePoller 안으로 통합을 진행하였다.

[리팩토링 후]

export function Page() {
  const { requestTimeOut,name } = usePoller();

  return (
    <>
      <Title>{`${name}님의 정보를 확인하고있습니다.`}</Title>
      <LoadingUI/>
      <PollingErrorFallbackModal requestTimeOut={requestTimeOut} />
    </>
  );
}