본문으로 건너뛰기

TossAds.destroy

특정 슬롯 ID를 지정해 해당 배너 광고를 DOM에서 제거하고 리소스를 해제합니다. 하나의 슬롯만 제거할 때 사용하고, 전체 제거가 필요하면 TossAds.destroyAll을 사용하세요.

시그니처​

destroy는 TossAds 네임스페이스 객체의 멤버로 노출됩니다.

import { TossAds } from '@apps-in-toss/web-framework';

declare const TossAds: {
  destroy: ((slotId: string) => void) & {
    isSupported: () => boolean;
  };
};

파라미터​

이름타입필수설명
slotIdstring✓제거할 광고 슬롯의 ID. BannerSlotEventPayload.slotId에서 확인할 수 있습니다.

반환값​

  • void — 반환값 없음.

권한​

권한이 필요하지 않습니다 — TossAds.destroy는 별도의 PermissionName에 바인딩되지 않습니다. 권한이 필요한 다른 네임스페이스의 일반적인 처리 흐름은 Guides — 권한 처리 패턴을 참고하세요.

예제​

최소 예제​

import { TossAds } from '@apps-in-toss/web-framework';

TossAds.destroy('slot-id-here');

실전 예제 — 슬롯 ID를 받아 특정 광고만 제거​

import { TossAds } from '@apps-in-toss/web-framework';
import { useEffect, useRef, useState } from 'react';

const AD_GROUP_ID = 'ad-group-id-here';

function AdBanner() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [currentSlotId, setCurrentSlotId] = useState<string | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    if (!TossAds.attachBanner.isSupported()) return;

    const { destroy } = TossAds.attachBanner(AD_GROUP_ID, containerRef.current, {
      callbacks: {
        onAdRendered: (payload) => {
          setCurrentSlotId(payload.slotId);
        },
      },
    });

    return destroy;
  }, []);

  const handleRemove = () => {
    if (currentSlotId) {
      TossAds.destroy(currentSlotId);
      setCurrentSlotId(null);
    }
  };

  return (
    <div>
      <div ref={containerRef} />
      <button type="button" onClick={handleRemove} disabled={!currentSlotId}>
        광고 제거
      </button>
    </div>
  );
}

직접 실행해 보기​

sdk-example의 Ads 페이지에서 광고 관련 API를 직접 실행해 볼 수 있습니다.

sdk-example에서 실행해 보기

관련 API​

관련 가이드​

외부 참조​