Refactor/216/프로필수정모달개선 by LMS10 · Pull Request #220 · kss761036/Epigram

1. 문제는 언제나 흐름의 단절에서 시작된다

모달은 그 자체로도 강력한 UI 요소지만, 열림과 닫힘의 흐름이 자연스럽지 않으면 사용자 경험에 불편을 유발한다.

또한, 개발자 입장에서도 리렌더링 되지 않거나 예측하지 못한 상태 유지로 인한 사이드 이펙트는 디버깅과 유지보수를 어렵게 만든다.

기존 구조에서는 다음과 같은 문제가 존재했다.

isProfileModalOpen 상태의 리렌더링 문제

• 기존에는 useState로 모달 상태(isProfileModalOpen)를 관리하고, onClose를 호출하여 닫는 방식이었음.
• 하지만 이 방식은 isProfileModalOpen이 true 상태에서 다시 true로 변경될 때 리렌더링이 발생하지 않는 문제점이 있음.
• 또한, onClose 호출이 보장되지 않으면 모달이 열리지 않는 경우가 발생할 수 있어 사이드 이펙트 발생 가능성이 있음.
• 이를 해결하기 위해 useModalStore()와 같은 전역 상태 관리 방식을 도입하여 open()을 호출하면 모달이 동적으로 열리는 방식으로 변경하는 것이 권장됨.

2. 어떻게 해결했는가?

1. 명령형 모달 + 전역 상태 관리로 흐름을 명확하게

모달 제어 방식을 useModalStore라는 전역 상태 훅으로 통합하고, 명령형으로 동작하도록 리팩토링하였다.

open('ProfileEdit', { userId: '123' });
close();

• 모달을 열 때는 type과 props를 명시
• 닫을 때는 전역 상태 초기화
• type에 따라 어떤 모달을 렌더링할지를 판별하도록 구성

→ 사이드 이펙트를 방지하고, 재사용성과 예측 가능성을 확보