프론트엔드 개발자도 디자인패턴 알아야할까요? - 상태패턴편

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

디자인 패턴

대상자

프론트엔드 개발자, 복잡한 상태 관리가 필요한 UI 설계자 / 중간 난이도 (디자인 패턴 개념 이해 기반)

핵심 요약

• 상태패턴은 "값 + 동작"을 하나의 객체로 관리하여 분기문 지옥을 해결
• React Hook과 결합해 복잡한 플로우(예: 가입 퍼널)를 유연하게 관리
• 상태 전환 로직을 각 상태 객체 내부에 캡슐화하여 유지보수성 향상

섹션별 세부 요약

###1. 상태패턴의 핵심 개념

• 상태 = 값 + 동작 구조로 설계, if/else 분기문 대체
• 예: 토글 컴포넌트에서 상태 객체가 스스로 동작 처리 및 상태 전환
• 위임을 통해 메인 로직 단순화 (기존: this.handleClick() → 패턴: this.currentState.handleClick())

###2. 프론트엔드와 백엔드의 설계 차이

• 백엔드: 깔끔한 API 설계 가능
• 프론트엔드: 사용자 이탈 방지 위해 복잡한 플로우 관리 필요
• 기획 변경 시 if/else 분기문 폭발 → 상태패턴으로 해결

###3. 상태패턴의 실제 적용 사례

• 가입 퍼널: 상태 객체로 각 단계의 다음 상태를 정의 (예: 목표금액입력 → 저축방식선택 → 정기적금설정)
• React Hook 구현: useFunnelState으로 상태 전환 로직 추상화
• 새로운 단계 추가: 상태 객체만 생성하고 연결 관계 수정으로 구현

###4. 상태패턴의 활용 분야

• 에디터 툴 상태 관리: 브러시/지우개/선택 툴 등 각 툴이 자체 동작 처리
• 웹소켓 연결 상태: 연결 중/완료/끊김 상태별 메시지 전송 로직 분리
• XState 라이브러리 활용: 상태 다이어그램 기반 코드 생성/시각적 설계 지원

결론

• 복잡한 플로우(예: 가입 퍼널, 웹소켓 상태)에 적합
• 단순한 상태(2-3개)일 경우 if/else 분기문 사용 권장
• "상태 = 값 + 동작"이라는 핵심 아이디어를 바탕으로 설계
• React Hook과 상태 객체 결합으로 메인 컴포넌트 단순화