destroy() 관련 문의
항상 친절한 답변 감사합니다.
위젯을 모바일 PC 각각 띄워야 해서 둘중 하나를 파괴하기위해 paymentMethod.destroy()를 사용하려고 했는데 모듈 안에서는 WidgetPaymentMethodWidget 인터페이스 내부에 존재하더라구요
destroy()를 무엇으로 Impor해와서 사용해야할지 잘 모르겠습니다
27 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요 v2 SDK 사용중이신가요?
네네
paymentMethod 정의하고 계신 코드 확인 가능할까요?
이렇게 쓰는게 아닌가요?
네 아닙니다 ..
밑에 renderPaymentMethods 있죠?
거기서 paymentMethodWidget 를 반환하고 있습니다.
destroy는 이미 렌더링 된 위젯을 뭉개뜨리고 다시 렌더링 할 때 사용합니다. 그래서 renderPaymentMethods의 응답을 ref로 저장하시고
paymentMethodWidget.current?.destroy() 이렇게 하시게 됩니다.
"위젯을 모바일 PC 각각 띄워야 해서" 혹시 이렇게 2개 띄우시는 이유가 잇을까요?
반응형으로 화면을 구성했는데 모바일과 PC가 따로 나누어져 있습니다 해서 이걸 갈아 엎기보단 pc에서 모바일로 전환될때 pc의 위젯을 없애는 방식을 생각했습니다
일단 SDK의 구조 측면에서 이상적인게
이미 위젯 어드민을 보셨으면 아시겠지만
이미 위젯 자체적으로 PC 모바일 반응형입니다.
하여서 하나의 인스턴스를 그대로 쓰는게 이상적인 상황이긴 한데,
모바일과 pc의 레이아웃이 많이 달랐어서 분리해서 개발을 했었습니다
그러시군요 확인 감사합니다.
그러시다면
결제 UI 렌더링 하시는 부분이 지금 Promise.all로 되어있는데
이번에 토스 적용이 처음이라 그부분을 고려 못한것도 있었습니다
그걸 벗기고
await widgets.renderPaymentMethods() 이렇게 해주세요.
이 응답값을 Ref에 저장하시고, destroy가 필요하실 때 그 ref에서 destroy하고 ref를 undefined로 초기화해주시기 바랍니다.
이후 모바일에서 다시 render 할때, 동일하게 await widgets.renderPaymentMethods() 하시고 ref에 저장하셔서 사용하시기 바랍니다.
감사합니다!
아 그리고 혹시
agreementWidget은 안쓰시는게 맞을까요?
지금 보니 전달주신 코드 Promise.all안에 렌더링 함수가 하나만 있네요.
네 따로 기획에 없어서 뺐습니다. 견적서와 계약서로 먼저 진행하기때문에 굳이 사용하지 않는것 같습니다
공유 감사드립니다. 그러면 안내드린대로
renderPaymentMethods 자체를 ref로 활용해서 사용하시면 되겠습니다.
잘 안되고 있는데 한번 더 질문해도 될까요?
다른 내용이면 새로 남겨쥐고 같은 문의면 이어서 해주세요
연관된 내용입니다 모바일과 pc로 분리되어 있던것을 하나로 합치고 반응형 위젯을 그대로 사용하기 위해 코드를 수정했지만 pc에서만 나오고 모바일로 전환되면 이미 위젯이 있다는 에러가 나옵니다. 해서 destroy를 활용 했지만 되지 않았습니다. 코드 한번 봐주셨으면 좋겠습니다.
useEffect(() => {
async function renderPaymentWidgets() {
if (widgets === null) {
return;
}
console.log("render 2번???");
await widgets?.setAmount(amount);
const paymentMethodsWidgetInstance = await widgets?.renderPaymentMethods({
selector: "#payment-method",
variantKey: "DEFAULT",
});
paymentWidgetRef.current = paymentMethodsWidgetInstance;
setReady(true);
}
renderPaymentWidgets();
return () => {
paymentWidgetRef.current?.destroy();
paymentWidgetRef.current = undefined;
};
}, [widgets]);
그런데 반응형과 destroy가 무슨 관련인가요?
일단 destroy를 꼭써야하나 먼저 확인을 해야할 것 같아요
pc > 모바일 바뀌어도 새로고침하면 저희가 자동 반응할텐데요
이미 위젯이 있다는 에러가 나와서 destroy를 활용해 보려 했습니다
영상으로 제공가능할까요?
설명을 잘못드린거 같습니다 처음 렌더때부터 해당 메세지가 노출됩니다
그럼 render를 어디선가 2번하는거 아닌가요?
render나 초기화 앞뒤로 log찍어서 몇번 호출되는지 확인해보셔야할 거 ㅅ같아요
예제로 올라온 코드 따라하긴 했는데 render 2번되는 지점을 좀 더 찾아보겠습니다 감사합니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.