• 목록

✅ “그거 그냥 커스텀 훅으로 뽑아”가 독이 되는 순간

추상화의 함정과 적정선

처음엔 깔끔하게 하려고 커스텀 훅을 만든다:

function useUserData(id) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch(`/api/user/${id}`).then(res => res.json()).then(setUser);
  }, [id]);
  return user;
}

하지만 점점 로직이 쌓이고,
훅 안에서 toast(), router.push(), setLoading() 등 사이드이펙트가 뒤섞이기 시작한다.

✅ 커스텀 훅은 “로직 분리”가 목적이지 “숨기기”가 아님

잘못된 추상화는:

• 로직을 파악하기 어렵게 만들고

• 디버깅을 어렵게 만든다

✅ 적정선은 여기까지

• 여러 컴포넌트에서 공통되는 비즈니스 로직만

• 사이드이펙트는 컴포넌트에서 직접 처리

무조건 뽑는 게 정답이 아니다.