개요

리팩토링 전 워크스페이스 페이지 구조는 아래와 같아요.

1. WorkspaceList에서 플러스 아이콘을 클릭하면 SelectModal이 열리고,
2. SelectModal에서 선택한 메뉴의 정보로 WorkspaceModal이 열리는 동작 흐름을 가지고 있어요.
3. SelectModal, WorkspaceModal은 각각 컨테이너 외부를 클릭하면 사라져요.

사진에서 첫번째가 SelectModal, 두번째가 생성 옵션이 선택된 WorkspaceModal이에요.

SelectModal, WorkspaceModal 둘 다 모달로 네이밍했는데 헷갈릴 수 있어서 첫번째 사진의 컴포넌트는 드롭다운으로 부르기로 했어요.

문제 상황

컴포넌트들이 뷰에 맞추어 나눠져있지만 굉장히 많은 props들이 엮여있었어요.

• WorkspaceList가 SelectModal에 영향을 주고, SelectModal이 WorkspaceModal에게 영향을 주는 복잡한 흐름이 있었고
• 또 WorkspaceModal 안에서는 선택된 옵션에 따라 다른 로직이 구현되어야 했어요.

우선 선택과 참여 API 연동을 위해서 WorkspaceModal 컴포넌트를 종류 별로 분리하려고 했어요.

이 때 상호작용의 흐름을 관리하는 상태와, 기능 동작 관련된 값을 관리하는 상태들이 혼재하게 되었어요.

그래서 왭^^은 이 컴포넌트들의 관심사를 분리시켜줄 필요가 있다고 생각했어요.