AlreadyWidgetRenderedError: 이미 위젯이 렌더링되어 있습니다. 다시 렌더링하려면 cleanup 을 먼저 호출해주세요.

개발 환경 : Next.js

공식문서에서 제공되는 react 코드를 기틀로 코드를 작성중입니다.
현재 렌더링 되는 상황에 위젯이 렌더링 되어 있다는 에러가 계속해서 발생합니다.

콘솔로 찍어 본 결과 첫 useEffect가 실행될 때 renderPaymentMethods 직전까지의 콘솔만 찍히고 바로 아래 콘솔은 찍히지 않습니다.
이때 renderPaymentMethods는 동작해 위젯이 렌더링은 되었지만, 리랜더나 어떤 요소에 의해 setState가 되지 않아 위젯을 추적할 수 없습니다..
추적하기 위해서 시도해본 방식은 useState에 담기와 useRef에 담기 입니다.

어떤 방식으로 해결할 수 있을지 현재 감을 못잡고있어 질문 드립니다!

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return
      }

      try {
        console.log("clean up")
        console.log("렌더링 되어있는 위젯 ---->", renderUi)
        console.log("widgets ----->", widgets)

        renderUi?.destroy()

        await widgets.setAmount(amount)

        console.log("여기까지 오는지 1")

        // ------  결제 UI 렌더링 ------
        const newUi = await widgets.renderPaymentMethods({
          selector: "#payment-method",
          variantKey: "DEFAULT",
        })

        console.log("newUi ----> ", newUi)
        setRenderUi(newUi)

        console.log("여기까지 오는지 2")

        // ------  이용약관 UI 렌더링 ------
        await widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        })
      } catch (error) {
        console.error(error)
      }

      setReady(true)
    }

    renderPaymentWidgets()

    return () => {
      renderUi?.destroy()
      setRenderUi(null)
    }
  }, [widgets])

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return
      }

      try {
        console.log("clean up")
        console.log("렌더링 되어있는 위젯 ---->", renderUi)
        console.log("widgets ----->", widgets)

        renderUi?.destroy()

        await widgets.setAmount(amount)

        console.log("여기까지 오는지 1")

        // ------  결제 UI 렌더링 ------
        const newUi = await widgets.renderPaymentMethods({
          selector: "#payment-method",
          variantKey: "DEFAULT",
        })

        console.log("newUi ----> ", newUi)
        setRenderUi(newUi)

        console.log("여기까지 오는지 2")

        // ------  이용약관 UI 렌더링 ------
        await widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        })
      } catch (error) {
        console.error(error)
      }

      setReady(true)
    }

    renderPaymentWidgets()

    return () => {
      renderUi?.destroy()
      setRenderUi(null)
    }
  }, [widgets])

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return
      }

      try {
        console.log("clean up")
        console.log("렌더링 되어있는 위젯 ---->", renderUi)
        console.log("widgets ----->", widgets)

        renderUi?.destroy()

        await widgets.setAmount(amount)

        console.log("여기까지 오는지 1")

        // ------  결제 UI 렌더링 ------
        const newUi = await widgets.renderPaymentMethods({
          selector: "#payment-method",
          variantKey: "DEFAULT",
        })

        console.log("newUi ----> ", newUi)
        setRenderUi(newUi)

        console.log("여기까지 오는지 2")

        // ------  이용약관 UI 렌더링 ------
        await widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        })
      } catch (error) {
        console.error(error)
      }

      setReady(true)
    }

    renderPaymentWidgets()

    return () => {
      renderUi?.destroy()
      setRenderUi(null)
    }
  }, [widgets])

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return
      }

      try {
        console.log("clean up")
        console.log("렌더링 되어있는 위젯 ---->", renderUi)
        console.log("widgets ----->", widgets)

        renderUi?.destroy()

        await widgets.setAmount(amount)

        console.log("여기까지 오는지 1")

        // ------  결제 UI 렌더링 ------
        const newUi = await widgets.renderPaymentMethods({
          selector: "#payment-method",
          variantKey: "DEFAULT",
        })

        console.log("newUi ----> ", newUi)
        setRenderUi(newUi)

        console.log("여기까지 오는지 2")

        // ------  이용약관 UI 렌더링 ------
        await widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        })
      } catch (error) {
        console.error(error)
      }

      setReady(true)
    }

    renderPaymentWidgets()

    return () => {
      renderUi?.destroy()
      setRenderUi(null)
    }
  }, [widgets])

AlreadyWidgetRenderedError: 이미 위젯이 렌더링되어 있습니다. 다시 렌더링하려면 cleanup 을 먼저 호출해주세요.

Similar Threads

Similar Threads

Similar Threads