[프로젝트] 장소 수정 폼 리팩토링 ..

1.0. 리팩토링

정신없이 빠르게 개발하다 보니 그냥 Form에 모든 로직을 때려박은 내 잘못이다.. 그 날에 저를 반성합니다..

귀찮다고 미룬 벌이라고 생각하고 달게 받겠습니다..

1.1. 어떻게 나눌꺼야?

나누려다 보니까 어떻게 컴포넌트를 분리하고 나눠야 할지 감이 안잡혔다.

그래서 일단 문제 상황과 원인을 분석 해서 정리해 봤다.

1.1.1. 문제 상황 정리 

1. 한 개의 컴포넌트(HostEditForm)에서 모든 폼 로직을 처리해서 코드가 복잡하다.

2. 이미지 처리, 폼 데이터 관리, 유효성 검사 등 여러 책임이 혼재하다.

3. 컴포넌트의 재사용성과 테스트를 하기에 적합하지 않다.

1.1.2. 원인 분석

1. 관심사 분리가 안되있다.

- 이미지 처리 로직

- 폼 데이터 관리

- 유효성 검사

- API 호출

 

2. 상태 관리가 복잡하다.

- 이미지 상태

- 폼 데이터 상태

- 수정 모드 상태

 

현재 가장 큰 문제는 한 개의 컴포넌트에서 모든 폼 로직을 처리해서 코드가 복잡하다는 문제

그렇다면 컴포넌트를 분리해야 한다는 결론이 도출되는데, 그렇다면 어떤 기준으로 나눌꺼야? 

컴포넌트의 분리 근거가 어떻게 되냐는거지

2.0. 분리 근거

세 가지 정도로 추릴 수 있을 것 같다.

1. 단일 책임 원칙(SRP)

2. 재사용성

3. 유지보수성

2.1. 해결 방법

커스텀 훅으로 로직 분리

useImageHandler - 이미지 관련 로직 처리
usePlaceForm - Form 관련 로직 처리
useEditHandler - 수정/저장 버튼에 관련된 로직 처리
useFormHandler - Form 입력 변경에 대한 로직 처리
useInitHandler - Form 초기화 관련 로직 처리

컴포넌트 분리

PlaceEditButton - 수정/취소 버튼
ImageSlider - 이미지 슬라이더
FormInput - 입력 필드들
SaveButton - 저장 버튼
PlaceAddressModal - 주소 선택 모달