리액트 입문,,

[h1un]

제가 타입스크립트도,, 리액트도 처음 써보는데 처음 만든 훅 구경해보세요 🙀

부트스트랩 모달으로 커스텀모달 컴포넌트를 만들고 useModal 을 만들어보았습니다

CustomModal.tsx

import {Button, Modal} from "react-bootstrap";

interface ModalParams {
    show: boolean;
    title: string;
    message: string;
    handleDone?: () => void;
    handleCancel?: () => void;
}

export const CustomModal = ({show, handleDone, handleCancel, title, message}: ModalParams) => {
    return (
        <Modal show={show} onHide={handleCancel ? handleCancel : handleDone} centered>
            <Modal.Header closeButton>
                <Modal.Title> {title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <p>{message}</p>
            </Modal.Body>
            <Modal.Footer>
                {handleCancel && <Button variant={"outline-success"} onClick={handleCancel}>취소</Button>}
                <Button variant={"danger"} onClick={handleDone}>확인</Button>
            </Modal.Footer>
        </Modal>
    )
}

handleCancel 이 없으면
[확인] 버튼만 있는 모달이고

handleCancel 이 있으면
[취소] [확인] 버튼이 있는 모달입니다.

useModal.tsx

import {useState} from 'react';

const useModal = () => {
    const [showModal, setShowModal] = useState(false);
    const [title, setTitle] = useState('');
    const [message, setMessage] = useState('');
    const [handleDone, setHandleDone] = useState<(() => void) | undefined>(undefined);
    const [handleCancel, setHandleCancel] = useState<(() => void) | undefined>(undefined);

    const modal = (title: string, message: string, isShow: boolean, onDone?: () => void, onCancel?: () => void) => {
        setTitle(title);
        setMessage(message);
        setShowModal(isShow);
        setHandleDone(() => onDone);
        setHandleCancel(() => onCancel);
    };

    const handleModalClose = () => {
        setShowModal(false);
    };

    return {showModal, title, message, handleModalDone: handleDone, handleModalCancel: handleCancel, modal, handleModalClose};
};

export default useModal;

사용할때는 따로 handleModalDone 를 만든후

const handleModalDone = () => {
    // 확인 버튼을 클릭했을때 코드
    handleModalClose();
}

아래와 같이 사용했습니다

//[확인] 버튼만 있는 모달
 modal("타이틀", "메세지", true, handleModalDone); 
// [취소][확인] 버튼이 있는 모달
 modal("타이틀", "메세지", true, handleModalDone, handleModalClose); 

🐥 좋은 리팩토링 의견 부탁드립니다

[Wisesaturn]

아니 왜 이제 보여주셨죠
저도 기존 useModal 훅 수정 중이었는데 컴포넌트 구조가 깔쌈하군여,,,
(컴파운트 패턴 선호자)

우선 저의 소견을 살짝 말씀드리자면,,,
저는 함수를 짜거나, 컴포넌트를 설계할 때 RORO 패턴을 항상 염두하며 구현합니다!

const modal = (title: string, message: string, isShow: boolean, onDone?: () => void, onCancel?: () => void) => {
        setTitle(title);
        setMessage(message);
        setShowModal(isShow);
        setHandleDone(() => onDone);
        setHandleCancel(() => onCancel);
    };

Parameter가 2-3개 이상으로 넘어가게 된다면 순서에 맞게 Parameter를 넘겨야만 하는 셀프 가두리 양식이 생깁니다 😅
저는 컴포넌트가 복잡해질 때나 오히려 기능이 많다면 객체를 주로 사용합니다.
추후에 이 함수를 사용했을 때, 어떤 목적으로 만들어졌는지가 분명하려면 객체의 키를 통해 어떤 값을 내려줄지 나름 추측을 할 수 있죠!

type ModalOptions = {
  title: string;
  message: string;
  isShow: boolean;
  onDone?: () => void;
  onCancel?: () => void;
};

const modal = ({
  title,
  message,
  isShow,
  onDone,
  onCancel
}: ModalOptions) => {
  setTitle(title);
  setMessage(message);
  setShowModal(isShow);
  setHandleDone(() => onDone);
  setHandleCancel(() => onCancel);
};

// 사용
modal({
  title: "알림",
  message: "작업이 완료되었습니다.",
  isShow: true
});

이런식으로 바꾸면 좋아보입니다!

[qhahd78]

추천 ) react Potal 이라고, 모달처럼 독립된 DOM 요소를 만들 때 쓰는 것이 있습니다. (링크 참조)
요 키워드를 사용해보시는 것을 추천드립니다!

• 위 재한님 코멘트에 동의 합니다! 몬스터 프론트 쪽에서도 객체로 관리하고 있구요.

• 컴파운드 패턴

  • 저는 유동적인 UI 를 구성하는 컴포넌트에는 쓰는 것이 좋다고 생각하는데, 모달은 형식이 나름 정해져있는 컴포넌트라 컴파운드 패턴을 사용하지 않더라도 괜찮다고 생각합니다! (물론 사용해도 좋습니다!)
  • 컴파운드 패턴 관련하여 괜찮은 카카오 포스팅을 놓고 가겠습니다. https://fe-developers.kakaoent.com/2022/220731-composition-component/

• Done 보다는 Confirm 이 네이밍이 더 좋지 않을까? 조심스레 의견 드립니다..

• modal 관련 데이터는 전역 상태 관리를 해보는 것이 어떨까요?

  • https://yoonhaemin.com/tag/experience/react-modal/
  • 위 링크 포스팅을 보면, 모달은 컴포넌트에 종속적이지 않도록 따로 hook 으로 관리합니다. 몬스터 프론트도 이런 방식을 사용하는데 저는 개인적으로 매우 편하게 사용 중이라 추천 드립니다. 몬스터 쪽 예시 코드는 맨 아래에 첨부합니다!

• 추가로, 제가 모달을 아무리 공통 컴포넌트로 잘 만들어두어도 항상 예외라는 것이 생기더군요..

  • 그래서 Message 안에는 텍스트뿐만이 아니라 컴포넌트도 넣을 수 있게 작업을 해두었는데, 그렇게 만들어두면 따로 모달 내 컨텐츠를 만들어 전달해줄 수 있어서 괜찮더라고요. (이건 정답은 아니라 제가 잘 한건지 모르겠습니다. 추가 의견 환영합니다!)

프론트엔드 시작하신지 얼마 안되었는데 이 정도 경지에 오르시다니... 대단하십니다!

// useModal 정의 
export const useModal = () => {
  const [modalData, setModalData] = useRecoilState(DefaultModalStore);
  const reset = useResetRecoilState(DefaultModalStore);

  const closeModal = useCallback(
    (onClick?: () => void) =>
      setModalData((prev) => {
        return {
          ...prev,
          show: false,
          onClick,
        };
      }),
    [setModalData],
  );

  const showModal = useCallback(
    ({ icon, content, content2, modalId, onClick }: ShowModalType) => {
      setModalData({
        icon: icon,
        show: true,
        content: content,
        content2: content2,
        modalId: modalId,
        onClick: () => {
          onClick && onClick();
          reset();
        },
      });
    },
    [setModalData],
  );

  return {
    modalData,
    setModalData,
    closeModal,
    showModal,
  };
};

// 실제 사용법
useEffect(() => {
    if (candidateError) {
      showModal({
        content: currentPageMessages[getErrorContent(candidateError)],
        modalId: 'CANDIDATE_ERROR',
        onClick: async () => {
          await logoutClick();
        },
      });
    }
  }, [candidateError]);

[KyuTae98]

역시 대장님,,,
https://yoonhaemin.com/tag/experience/react-modal/

이 글 읽으면서 머리가 확장됨을 느낍니다...

[regularPark]

확인/취소 버튼 구성이 있는 모달은 Confirm으로 네이밍을 많이 하는 것 같아요.

유민님이 보여주신 예가 응시 쪽 모달에서도 쓰이는 모달인데요.

두분께서 구조에 관한 이야기를 하셨으니, 저는 좀 지엽적으로 가보자면,

handleCancel 함수 같은 경우 제가 이해하기엔 모달을 끄는 역할을 하는 것 같아요. 그렇다면 상태로 관리하기 보다 showModal을 false로 set 해주든다든가 하는 함수로 정의를 해주는 것도 좋아보여요.

이와 비슷하게 useModal을 외부에서 쓰는 일이 많을 것으로 생각이 되는데 handleDone 같은 경우도 상태로 관리하기보다 위에서 재한님, 유민님께서 보여주셨듯 외부에서 주입하는 것이 재사용성 측면에서 유리하지 않나 싶습니다:)

[KyuTae98]

앞에 분들의 매우 좋은 의견을 주셨네요!!

저도 지엽적으로 들어간면

onHide={handleCancel ? handleCancel : handleDone}

요 부분을 따로 변수로 꺼낸다면 명확하게 사용이 가능하고 유지 보수에 있어 좋다고 생각합니다!

근데 역시 짬이 있으니까 코드가 매우 깔끔하네유,..,

[bbearcookie]

리액트를 처음 사용해보시는 것인데도 합성 컴포넌트로 엄청 깔끔하게 작성하셨군요.. 대박 👍👍

저는 모달을 관리하는 데 있어서 중요 포인트는 2가지라는 생각이 들었는데요..!

1. 모달이 열렸는지, 닫혔는지 등의 상태
2. 모달 내용으로 보여줄 View 컨텐츠

먼저 상태를 어떻게 관리해야할 지가 고민이 되는데, Chakra UI에서는 useDisclosure 라는 훅으로 오버레이의 열고 닫힘과 관련된 로직을 추상화하여 관리하더라구요..!

혹은 toss/slash 라이브러리 중 useOverlay나 최근 업데이트 된 overlay-kit 에서는 오버레이 요소에 대한 상태를 내부적으로 핸들링해줌으로써 사용하는 개발자는 표현해야 하는 UI에만 집중할 수 있도록 제공하고 있더라구요!

아직 깊게 파보지 못한 부분이어서, 요런 것들도 알아가고 싶다는 생각이 들어요 😊
(오버레이의 상태와 관련된 로직을 추상화한 레이어가 있고, 각 모달에서 보여줘야 할 View만 따로 컴포넌트로 관리한다면 어떨지? 와 같은 고민을 하고 있습니당..)

References
https://toss.tech/article/frontend-declarative-code