트러블 슈팅: Props Hell에서 벗어나기 - Context API를 활용한 컴포넌트 최적화

요약

• 문제: 한 컴포넌트에 12개가 넘는 props가 전달되며 가독성과 유지보수성이 저하되었습니다.
• 접근: 불필요한 props 정리 → props 구조화 → 로컬 범위에 한정된 상태 공유를 위해 Context API 채택.
• 이유: 전역 상태관리(Zustand)는 현재 문제 규모에 비해 과도하며, Context API가 성능·복잡도 측면에서 더 적합했습니다.
• 효과: 전달 props를 12 → 4개로 축소하고, 코드 복잡도를 낮추어 이후 수정·확장이 쉬워졌습니다.

문제: 가독성을 해치는 수 많은 Props

date-scheduler.tsx 컴포넌트는 날짜와 시간을 선택하는 기능을 담당하고 있습니다.

초기에는 성능상의 이슈는 없었지만, 12개가 넘는 props가 전달되면서 코드가 매우 복잡해지고 가독성이 떨어지는 문제가 발생했습니다.

[문제 상황]

// Before: 12개 props 전달
<ScheduleItem
  schedule={schedule}
  index={index}
  schedules={schedules}
  touchedFields={touchedFields}
  formErrors={formErrors}
  register={register}
  onDateChange={handleDateChange}
  onTimeChange={handleTimeChange}
  onRemove={removeSchedule}
  onAdd={addSchedule}
  isLast={index === schedules.length - 1}
  canRemove={schedules.length > 1 && index !== schedules.length - 1}
/>

이렇게 많은 props를 내부적으로 전달하면서 당연하게도 코드의 유지보수성이 크게 떨어진다고 생각했고,

이는 향후 개발에 부담이 될 수 있다고 판단했습니다.

해결 과정: Props 최적화 및 상태 관리 고민

가장 먼저 불필요한 props를 정리했습니다. 이를 통해 전달되는 props의 개수를 4개로 줄이는 데 성공했습니다.

[Props 정리]