Dialog 컴포넌트 설계하기

Dialog(Modal) 컴포넌트는 많은 컴포넌트들 중에서도 다양하게 커스텀이 가능한 편입니다.

그렇기 때문에 자꾸 새로운 모양의 Dialog가 하나 둘 추가되기가 쉽고, 또 그래서 처음에 설계를 잘못하면 나중에 컴포넌트 관리가 굉장히 힘들어질 수 있습니다.

한 6개월 전에 제가 만든 Dialog API입니다. 어질어질하네요… 하지만 그때는 이게 최선이었습니다. 😭

6개월 동안 조금씩 기능이 추가되면서 props가 이 정도까지 많아졌습니다. 아무래도 설계를 잘못한 것 같아요…

만약 지금 제가 동일한 컴포넌트를 설계한다면 Dialog, DialogHeader, DialogFooter, DialogBody 4가지 컴포넌트를 조합해서 Dialog 컴포넌트를 만들 것 같습니다.

이렇게 만들면 마치 레고 블록을 가지고 노는 것처럼 다양한 모양의 Dialog를 쉽게 만들 수 있습니다.

아래와 같이 버튼 컬러만 다른 AlertDialog 컴포넌트를 한번 만들어볼까요?

코드는 이렇게 되겠습니다. DialogHeader, DialogFooter, DialogBody로 컴포넌트를 쪼개니까 각 컴포넌트의 역할이 명확해지면서 가독성도 좋아졌습니다.

API도 이전 버전보다 훨씬 심플해졌죠?

해당 컴포넌트를 사용하고 싶을 때는 아래와 같이 사용하면 됩니다.

AlertDialog 컴포넌트를 만들었더니 이제 leftButton이 무엇인지, rightButton이 무엇인지에 대해 코드를 하나하나 작성할 필요도 없어졌네요.

Footer가 없는 컴포넌트가 필요해도 이제는 쉽게 만들 수 있습니다.

6개월 전에 만든 Dialog 컴포넌트를 가지고 Footer가 없는 컴포넌트를 만든다면 어떻게 해야할까요? 😅

prop을 하나 더 추가해서 분기처리를 해야할 것 같습니다. props가 무한으로 늘어나는 구조네요…

확장성이 좋지 않은 컴포넌트는 요구사항이 바뀌거나 추가될 때 마다 prop을 자꾸만 추가해야 하고, 그 결과 어질어질한 API가 되기 쉽습니다.

그렇기 때문에 컴포넌트를 설계할 때는 처음 만들 때 최대한 멀리 생각하면서 설계할 필요가 있겠죠.

끝까지 읽어주셔서 감사합니다!

전체 코드가 궁금하시다면 여기서 확인하실 수 있습니다.