Refactors React components to reduce coupling: replaces props drilling with composition patterns, splits multi-return hooks, and isolates changes to prevent unrelated breakage.
npx claudepluginhub toss/frontend-fundamentals --plugin frontend-fundamentalsThis skill uses the workspace's default tool permissions.
코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.
Implements React Context pattern to share infrequent state like themes, users, or flags across component trees without prop drilling. Includes typed providers, safe hooks, and performance tips.
Guides React Context patterns for state management to share state across component trees without prop drilling. Includes TypeScript examples for auth providers.
Provides expert React patterns for hooks (useEffect, useState, useCallback, useMemo), composition, state management, context, performance, and re-renders.
Share bugs, ideas, or general feedback.
코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.
❌ props가 계층을 통과:
function ItemEditModal({ items, onConfirm, onClose }) {
return (
<Modal onClose={onClose}>
<ItemEditBody items={items} onConfirm={onConfirm} onClose={onClose} />
</Modal>
);
}
function ItemEditBody({ items, onConfirm, onClose }) {
return (
<>
<Button onClick={onClose}>닫기</Button>
<ItemEditList items={items} onConfirm={onConfirm} />
</>
);
}
✅ children으로 조합:
function ItemEditModal({ items, onConfirm, onClose }) {
return (
<Modal onClose={onClose}>
<ItemEditBody onClose={onClose}>
<ItemEditList items={items} onConfirm={onConfirm} />
</ItemEditBody>
</Modal>
);
}
function ItemEditBody({ children, onClose }) {
return <><Button onClick={onClose}>닫기</Button>{children}</>;
}
❌ 모든 것을 관리하는 Hook:
function usePageState() {
const [query] = useQueryParams({
cardId: NumberParam, dateFrom: DateParam, dateTo: DateParam, statusList: ArrayParam
});
}
✅ 단일 책임 Hook:
function useCardIdQueryParam() {
const [cardId, setCardId] = useQueryParam("cardId", NumberParam);
return [cardId ?? undefined, setCardId] as const;
}
| 코드 냄새 | 개선 방법 |
|---|---|
| 3개 이상 계층 통과하는 props | 조합 패턴: children 사용 |
| 5개 이상 반환하는 Hook | 단일 책임 Hook으로 분리 |
| A 수정 시 관련 없는 B 깨짐 | 결합 지점 식별 후 인터페이스 도입 |
| 모든 곳에서 import하는 util | 사용처 가까이로 이동 |
진정한 전역 관심사만: 테마, 로케일, 인증 상태, 10개 이상 컴포넌트가 필요한 데이터.
조합 패턴을 피하려고 Context 남용하지 말 것.
참고: https://frontend-fundamentals.com/code-quality/loosely-coupled/