TIL -회원가입 폼 컴포넌트 리팩토링을 통한 코드 구조 개선

이전 퍼널 구조 관련 글

TIL - 회원가입 폼 퍼널 구조로 개선, 로그인 유지 기능 구현

TIL - 퍼널 구조 개선

오늘 학습한 내용

1. 복잡한 회원가입 로직의 분리와 구조화
2. React 컴포넌트의 책임 분리 원칙 적용
3. 코드 가독성과 유지보수성 향상

 

초기 상태

• 모든 회원가입 로직이 SignUpForm 컴포넌트에 집중
• 코드의 복잡성으로 인한 가독성 및 유지보수 어려움

리팩토링 과정

 

a. 퍼널 구조 도입

• 단계별 회원가입 프로세스 구현
• 사용자 경험 개선 및 로직 분리 시작

b. SignUpForm 역할 재정의, 컴포넌트 분리

• EssentialInfoForm, AdditionalInfoForm 등 단계별 컴포넌트 생성
• 각 단계의 로직을 해당 컴포넌트로 이동
• 전체 회원가입 프로세스 상태 관리
• 단계별 폼 렌더링 제어
• 전체 로직 흐름 관리

리팩토링 결과:

• 코드 길이 감소: 약 40-50줄에서 25-30줄로 축소
• 가독성 향상: 각 컴포넌트의 역할이 명확해짐
• 유지보수성 개선: 특정 기능 수정 시 해당 컴포넌트만 수정 가능
• 재사용성 증가: 분리된 컴포넌트의 독립적 사용 가능

 

학습 포인트:

• 리액트 컴포넌트 구조화 기법
• 단일 책임 원칙(SRP)의 중요성
• 점진적 리팩토링의 효과

결론: 이번 리팩토링을 통해 코드의 구조와 품질을 크게 개선할 수 있었습니다. 복잡한 로직을 분리하고 각 컴포넌트의 역할을 명확히 함으로써, 향후 기능 추가나 수정이 용이해졌습니다. 확실히 전과 후의 코드를 보면서 리팩토링의 중요성을 다시 한 번 확인하는 좋은 경험이었습니다.