배포에 방해되지 않도록 레거시 React 프로젝트 정리하기

Source: Dev.to

변경하기 전에 진단하기

폴더를 재구성하거나 패턴을 도입하기 전에 실제 비용이 어디에 있는지 파악하세요.

일반적인 신호

• 200~500줄 이상의 컴포넌트
• 비즈니스 로직이 렌더링과 혼합된 경우
• 여러 책임을 담당하는 useEffect
• 코드베이스 전반에 중복된 로직
• 암묵적인 의존성(흩어져 있는 전역 상태)

이 매핑이 없으면 리팩터링이 피상적이 됩니다.

최소 기준 정의하고 악화를 방지하기

레거시 코드를 고치기 전에 더 이상 늘어나지 않도록 막아야 합니다.

간단한 기준만 잡아도 일관성이 크게 향상됩니다:

• Components → UI만 담당
• Hooks → 로직 및 상태 담당
• Services → API 통신 담당

규칙: 새로운 코드는 반드시 기준을 따라야 하며, 기존 코드가 기준을 충족하지 않더라도 예외를 두지 않습니다.

타입이 아니라 기능별로 구조화하기

레거시 프로젝트는 흔히 “타입별”( components/, utils/ 등) 구조를 사용합니다. 이는 결합도를 높입니다.

기능 기반 구조가 더 잘 확장됩니다:

src/
  features/
    users/
      components/
      hooks/
      services/
    dashboard/
  shared/
    components/
    hooks/
    utils/
  app/
    routes/
    providers/

이렇게 하면 교차 의존성이 줄어들고 도메인별 소유권이 강화됩니다.

점진적 리팩터링 (유일한 실현 가능한 전략)

대규모 배치 리팩터링을 피하세요. 위험이 비용을 정당화하기 어렵습니다.

효과적인 접근법

• 코드를 건드리면 → 해당 부분을 개선
• 중복을 발견하면 → 추출
• 로직이 섞여 있으면 → 훅으로 이동

작은 지속적인 개선이 시간이 지나면서 큰 변화를 만듭니다.

책임을 명확히 분리하기

레거시 코드의 주요 문제 중 하나는 책임이 혼합된다는 점입니다.

전형적인 예시

function Dashboard() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  function processData() {
    // complex logic
  }

  return {/* UI + logic */}
}

리팩터링 후

Hook

// useDashboardData.ts
export function useDashboardData() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return { data }
}

Component

function Dashboard() {
  const { data } = useDashboardData()
  return /* UI using data */
}

얻는 이점은 미관이 아니라 결합도 감소와 예측 가능성 향상입니다.

부수 효과 중앙화

레거시 프로젝트는 종종 중복된 요청과 일관성 없는 상태 관리에 시달립니다.

React Query (TanStack) 혹은 SWR 같은 도구로 표준화하면:

• 자동 캐싱
• 데이터 동기화
• 수동 useEffect 로직 감소

결과: 버그 감소와 보일러플레이트 감소.

중요한 부분에 테스트하기

레거시 시스템에서 전체 커버리지는 드물게 효율적입니다.

우선순위

• Hooks (비즈니스 로직)
• Services (규칙 및 통합)

낮은 우선순위

• 순수 UI 컴포넌트

전략 비교

결론

레거시 React 프로젝트를 정리하는 것은 완벽한 아키텍처를 만드는 것이 아니라 배포를 멈추지 않으면서 지속적으로 복잡성을 낮추는 것입니다.

책임을 명확히 분리하고, 기능 기반 구조를 채택하며, 점진적인 리팩터링을 진행하면 가장 낮은 위험으로 최고의 결과를 얻을 수 있습니다. 시간이 지나면서 예측 불가능했던 코드는 유지보수·테스트·확장이 쉬운 시스템으로 변모합니다.