Claude Code로 React 컴포넌트 리팩터링할 때 쓰는 프롬프트

언제 사용하나

props가 계속 늘어나고 한 파일이 300줄을 넘긴 React 컴포넌트를, 동작을 바꾸지 않고 나누고 싶을 때.

준비할 정보

• 대상 컴포넌트 파일 경로
• 이 컴포넌트가 실제로 하는 일(한 문장)
• 건드리면 안 되는 외부 인터페이스(props, export 이름)

바꿀 placeholder

• {{FILE}} : 대상 파일 경로 (예: src/components/OrderTable.tsx)
• {{RESPONSIBILITY}} : 컴포넌트의 핵심 책임
• {{KEEP}} : 유지해야 하는 public 인터페이스

복사해서 쓰는 프롬프트

@{{FILE}} 를 리팩터링하려고 해. 바로 코드를 고치지 말고 아래 순서로 진행해줘.

1) 이 컴포넌트가 지금 맡고 있는 책임을 목록으로 정리해줘.
2) 그중 핵심 책임은 "{{RESPONSIBILITY}}" 야. 나머지 중 분리 가능한 것을 골라줘.
3) 분리안을 2개 제시하고 각각의 파일 구조, 장단점, 리스크를 비교해줘.
4) 내가 하나를 고르면 그때 수정해줘.

제약:
- {{KEEP}} 의 시그니처와 export 이름은 바꾸지 마.
- 렌더링 결과와 사용자 동작은 그대로 유지해야 해.
- 상태 로직은 커스텀 훅으로, 순수 표시 로직은 하위 컴포넌트로 빼는 방향을 우선 검토해줘.
- 기존 테스트가 있으면 먼저 읽고, 깨질 가능성이 있는 테스트를 미리 알려줘.
- 한 번에 파일 하나씩만 수정하고, 수정할 때마다 무엇을 왜 바꿨는지 요약해줘.

입력 예시

{{FILE}} = src/components/OrderTable.tsx
{{RESPONSIBILITY}} = "주문 목록을 표 형태로 보여준다"
{{KEEP}} = "OrderTable props와 default export"

기대 출력

현재 책임 목록 → 분리안 2개 비교 → 선택 후 단계별 수정.

검수 방법

• pnpm test 또는 프로젝트 테스트 명령을 리팩터링 전후로 각각 실행해 결과가 같은지 확인한다.
• git diff 로 export 이름과 props 타입이 그대로인지 확인한다.

주의사항

• "리팩터링해줘" 한 줄만 던지면 동작까지 바꿔 버리는 경우가 많다. 계획을 먼저 받고 승인하는 방식이 안전하다.
• 테스트가 없는 컴포넌트라면 리팩터링 전에 렌더링 스냅샷 테스트라도 먼저 추가한다.

활용 팁

• 분리안 비교 단계에서 "파일 수가 늘어나는 대신 얻는 게 뭔지" 물어보면 과도한 분리를 막을 수 있다.