11.12 항해 61일차 TIL

두가지의 Modal을 핸들링하는게 계속 안되서 결국 자려고 누웠는데 문득 children으로 하면 될 것 같다는 생각이 나서 다시 컴퓨터를 켜고 생각나는 대로 작성 했더니 어찌저찌 성공했다.

핵심은 children props를 사용해서 컴포넌트 깊숙히 있던 Modal을 밖으로 최대한 꺼내와서 state로 관리했는데 이 방법이 옳은 방법인지는 나중에 더 찾아봐야 알 수 있을 것 같다.

// CardFront.js

// 메인페이지 : 카드 뒷면 모달, 컨탭페이지 : 사이드 모달
const [showModal, setShowMadal] = React.useState(false);
// 사이드 모달 안에있는 카드 뒷면 모달
const [showModalInSideModal, setShowModaInSideModal] = React.useState(false);

const showCardBackModal = () => {
    if (!showModal) {
      dispatch(loadCurrentCardDB(userId));
    }
    setShowMadal(true);
  };

  const closeModal = () => {
    setShowMadal(false);
  };

const handleSideModal = () => {
    setShowMadal(false);
    setShowModaInSideModal(true);
  };

  const closeSideModal = () => {
    setShowModaInSideModal(false);
    setShowMadal(true);
  };

return (
    <Grid
      width="350px"
      height="200px"
      borderRadius="16px"
      border="1px solid black"
      margin="16px"
      _onClick={behind}
    >
      <Grid _onClick={stopPropagation}>
        {!contap && (
          <CardModal show={showModal} onHide={closeModal} userId={userId} />
        )}
        {contap && (
          <ContapModal
            className="contapModal"
            show={showModal}
            onHide={closeModal}
            userId={userId}
          >
            <CardFrontContap onModal={handleSideModal} userId={userId} />
          </ContapModal>
        )}
        {showModalInSideModal && (
          <CardModal show={showModalInSideModal} onHide={closeSideModal} userId={userId} />
        )}
      </Grid>
      <Div is_flex>
        <Image
          shape="circle"
          src={front[userId] ? front[userId].profile : null}
        />
        <Grid width="30%" margin="0px 20px">
          <Text>{front[userId] ? front[userId].userName : null}</Text>#{' '}
          # {stackHashTags}
          <Text color="#7F7C82" bold />
        </Grid>
      </Div>
      <Hash>
        {interestHashTags?.map((stack, idx) => {
          return stack && <HashTag key={idx} tag={stack} />;
        })}
      </Hash>
      <Grid _onClick={stopPropagation}>
        {contap && select === 'ReceiveTap' && (
          <button type="button" onClick={acceptTap}>
            수락
          </button>
        )}
        {contap && select === 'ReceiveTap' && (
          <button type="button" onClick={rejectTap}>
            거절
          </button>
        )}
      </Grid>
    </Grid>
  );
};

CardFront 컴포넌트를 클릭 시 ContapModal을 불러온다.
그 ContapModal은 CardFront 컴포넌트를 사용할 수 있는가?
없다면 새로운 컴포넌트를 만들어서 다시 사용해야 하나?
컴포넌트의 재 사용성을 고려해서 만들었다면 당연히 사용 할 수 있는 것 아닌가?
사용이 안된다면 나는 그 컴포넌트를 재사용성을 고려해서 만들지 못한건가?

저번에 내가 나에게 던졌던 질문이다.

이게 계속 신경 쓰였는데 아직 적용은 안해봤지만 새로운 해결법이 생각났다.

모달을 계속 컴포넌트안에 넣어두고 호출 했었는데 굳이 그럴 필요가 없을 것 같아서 추후에 리팩토링을 할 때 모달을 전부 다른 컴포넌트로 빼두고 children으로 필요한 컴포넌트를 넣어서 사용한다면 굳이 CardFrontContap 이라는 컴포넌트를 만들 필요 없이 생각했던 대로 컴포넌트를 재사용 할 수 있을 것 같았다. 나중에 꼭 추가해봐야지!