다이얼로그 상태 관리, 어떻게 하고 계신가요?

[s2oy]

고민

다이얼로그 상태 관리, 어떻게 하고 계신가요?
로컬 state를 각각 선언하거나, useReducer를 사용하여 관리하는데요.

예를 들어 한 페이지에서 각각 다른 다이얼로그가 열리는 버튼이 여러개가 있을 때,
각각 상태를 관리한다면 코드가 너무 길어지더라구요.
덕분에 한 페이지에서 다이얼로그 상태 제어 state가 10개가 넘어갔어요!

전역 상태 관리로 하게 될 경우, 페이지 내부 컴포넌트가 모두 리렌더 될 것같아 우려되는데요..

이런 경우에 다들 어떤 식으로 문제를 해결하시는지 궁금해요.
전역 상태를 Provider와 결합하여 사용하는 패턴을 많이 사용하나요?

이런 상태가 어느정도 쌓였을 때 전역 관리로 변경해주어야할지도 궁금합니다!

코드

const [showADialog, setShowADialog] = useState(false);
const [showBDialog, setShowBDialog] = useState(false);
.
.
.

[nnnnoel]

저희는 toss팀에서 릴리즈한 overlay-kit과 유사한 사내 라이브러리를 직접 만들어서 보다 선언적으로 dialog의 생명주기를 관리할 수 있게 개선을 진행하고 있어요.

[s2oy]

답변 감사합니다 😄
말씀해주신 방향으로 제가 원하는 바를 해소할 수 있을 것같아요!