Side-bar에서 포인트 충전 모달 컴포넌트 상시 렌더링 문제 해결

[YongYong21]

@tkyoun0421
말했던 부분 discussion으로 정리했습니다.

문제 상황

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance['renderPaymentMethods']
  > | null>(null);  
  const selector = '#payment-widget';
  useEffect(() => {
    (async () => {
      const paymentWidget = await loadPaymentWidget(clientKey, customerKey);

      const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
        selector,
        { value: price, currency: 'KRW', country: 'KR' },
        { variantKey: 'DEFAULT' },
      );

      paymentWidgetRef.current = paymentWidget;
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
    })();
  }, [paymentWidgetRef, price]);

  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;

    if (paymentMethodsWidget == null) {
      return;
    }

    paymentMethodsWidget.updateAmount(price);
  }, [price]);
  // ...
  
  return (
    ...
    <div id="payment-widget" />
  )

selector에 해당하는 HTML 요소를 확인할 수 없어서, 모든 페이지에 해당 에러 발생.

문제점

// Sidebar UserProfile.tsx
<StyledSpace direction="vertical" align="center">
      <TextBox typography="h5" color="primary" fontWeight="bold">
        {userInfoData.name} 님
      </TextBox>
      <TextBox typography="h3" color="black900" fontWeight="bold">
        {numberFormat(pointSummaryData.currentPoint)} P
      </TextBox>
      <StyledButton type="primary" size="large" onClick={showModal}>
        포인트 추가하기
      </StyledButton>
      <PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />  // 상시 렌더링
</StyledSpace>

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  console.log('컴포넌트 렌더링');
}

모달 컴포넌트에 들어가져있는 로직이 원래는 모달 컴포넌트가 열린 상태에서 로직실행이 되어야 한다. 하지만,

<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

이런식으로 작성하게 되면 모달 컴포넌트가 보여지지않지만 렌더링이 되는 상황이 된다.

해결

{isModalOpen && (<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />)}

isModalOpen이 true인 경우에만 해당 컴포넌트 렌더링하게 작성.