리액트로 만들어진 다이얼로그가 있는데 너무 더러워서 리팩토링을 하려고 합니다. 그런데 생각과 달리 아무리 해도 깔끔해 질 수 가 없는거 같아 질문드립니다.
리팩토링 하고자 하는 컴포넌트는 다음과 같습니다.
컴포넌트에 대해 설명을 하자면 리스트를 관리하면서 보여주고 순서를 바꾸거나 요소를 추가, 삭제, 수정할 수 있는 컴포넌트 입니다. (사진의 위아래 화살표를 눌러 드래그 하면 순서를 바꿀 수 있습니다.)
컴포넌트는 다음과 같이 사용됩니다.
<ListDialog
title={ ... }
list={ ... }
onClickCloseButton={ ... }
onClickUpdateButton={ ... }
onClickSaveButton={ ... }
onChangeSort={ ... }
onClickRemoveButton={ ... }
loading={ ... }
등등
/>
매개변수들은 모두 사진의 파란 동그라미 속 숫자들이고, 추가로 보내줘야하는 것들도 포함합니다.
제가 더럽다고 느끼는 포인트는 너무 많은것들을 밑으로 보내줘야 한다는 사실입니다. 그리고 <ListDialog>는 또 내부에 있는 다양한 더 작은 컴포넌트들에게 props를 다시 넘겨주도록 구성됩니다.
함수라고 생각하면 ListDialog는 매개변수를 10개이상 받는 함수인 느낌이라 문제가 있다고 느낍니다. 하지만 또 그만큼 기능이 많기때문에 props로 안 넘길수도 없을거 같습니다.
제가 더럽다고 느끼는게 문제일까요? 아니면 이상하게 만들어서 문제인 걸까요?
감사합니다.
(추가로 리스트는 모두 서버로부터 받아오고 graphql을 사용합니다. 따라서 동작 과정중 로딩이 포함되며, 모든 동작들은 다른 다이얼로그나 버튼에서도 사용되기 때문에 해당 다이얼로그에 직접 함수를 작성하기도 어려울거같습니다.)