개발 잘해지는 닉네임
290
2021-01-03 20:17:44
5
348
#846202 Tech Q&A

다음의 리액트 컴포넌트를 깨끗하게 만들 수 있을까요?

리액트로 만들어진 다이얼로그가 있는데 너무 더러워서 리팩토링을 하려고 합니다. 그런데 생각과 달리 아무리 해도 깔끔해 질 수 가 없는거 같아 질문드립니다.


리팩토링 하고자 하는 컴포넌트는 다음과 같습니다.

컴포넌트에 대해 설명을 하자면 리스트를 관리하면서 보여주고 순서를 바꾸거나 요소를 추가, 삭제, 수정할 수 있는 컴포넌트 입니다. (사진의 위아래 화살표를 눌러 드래그 하면 순서를 바꿀 수 있습니다.)


컴포넌트는 다음과 같이 사용됩니다.

<ListDialog
  title={ ... }
  list={ ... }
  onClickCloseButton={ ... }
  onClickUpdateButton={ ... }
  onClickSaveButton={ ... }
  onChangeSort={ ... }
  onClickRemoveButton={ ... }
  loading={ ... }
  등등
/>

매개변수들은 모두 사진의 파란 동그라미 속 숫자들이고, 추가로 보내줘야하는 것들도 포함합니다.



제가 더럽다고 느끼는 포인트는 너무 많은것들을 밑으로 보내줘야 한다는 사실입니다. 그리고 <ListDialog>는 또 내부에 있는 다양한 더 작은 컴포넌트들에게 props를 다시 넘겨주도록 구성됩니다.

함수라고 생각하면 ListDialog는 매개변수를 10개이상 받는 함수인 느낌이라 문제가 있다고 느낍니다. 하지만 또 그만큼 기능이 많기때문에 props로 안 넘길수도 없을거 같습니다.


제가 더럽다고 느끼는게 문제일까요? 아니면 이상하게 만들어서 문제인 걸까요?

감사합니다.


(추가로 리스트는 모두 서버로부터 받아오고 graphql을 사용합니다. 따라서 동작 과정중 로딩이 포함되며, 모든 동작들은 다른 다이얼로그나 버튼에서도 사용되기 때문에 해당 다이얼로그에 직접 함수를 작성하기도 어려울거같습니다.)






0
0

  • 답변 5

  • 킁킁탐정
    844
    2021-01-03 20:38:59 작성 ∙ 2021-01-03 20:39:38 수정됨

    redux, redux-toolkit, recoil, mobx, zustang, jotai, effector 등의 상태 관리 라이브러리 또는 react context를 이용하는 방법이 있습니다.

    또는 컴포넌트를 비슷하게 계증 구조화하는 방법인데 결과적으로 비슷한 형태의 다른 모습이 되는것뿐이라 맘에 안드시면 상태 관리 라이브러리를 알아보시는게 좋습니다.

     

    0
  • 개발 잘해지는 닉네임
    290
    2021-01-03 20:57:50

    킁킁탐정님 답변감사합니다~ 좀더 공부해봐야겠네요 ㅠㅠ


    0
  • 김룰룰룰
    608
    2021-01-04 00:06:21

    React를 안 한지 오래돼서 맞는 얘긴지 모르겠는데요, 지금 Dialog가 받는 props들 다 동일한 생명 주기를 갖는 것 같은데 Dialog를 띄우는 컴포넌트에서 제공 하기 보다 Dialog가 직접 상태를 갖는 게 낫지 않을까요?

    0
  • 페코옹
    1k
    2021-01-04 09:38:18

    전 요런식으로 보통 모달은 따로 떼서 사용해요


    요건 모달


    import React, { useState } from "react";

    export default function useModal({ callback }) {
    const [show, setShow] = useState(false);
    const renderModal = () => {
    return (
    <div className={`Modal ${show && "show"}`}>
    <h1>이건 모달</h1>
    <div className="action">
    <button onClick={() => setShow(false)}>취소</button>
    <button
    onClick={() => {
    callback();
    setShow(false);
    }}
    >
    적용
    </button>
    </div>
    </div>
    );
    };
    return { renderModal, setShow };
    }



    요건 실제 사용 할 때

    import React, { useState } from "react";
    import useModal from "./useModal";

    export default function App() {
    const [text, setText] = useState("Hello");

    const callback = () => {
    setText((value) => (value === "Hello" ? "Bye" : "Hello"));
    };

    const { renderModal, setShow } = useModal({ callback });

    return (
    <div className="App">
    {renderModal()}
    <button onClick={() => setShow(true)}>show modal</button>
    <h1>{text}</h1>
    </div>
    );
    }



    0
  • 개발 잘해지는 닉네임
    290
    2021-01-06 11:41:39

    김룰룰룰 위에서 넣는게 많아서 따로 주기가 힘드네요. 하지만 보편적인 경우는 그렇게 하는게 좋으거 같아요 감사합니다!

    페코옹 이렇게 뺴는 방봅도 있네요! 좋은거 하나 배워갑니다

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.